摘要：走了程序媛这条路英式吐槽不经历风雨怎么有夏天岁月带走的是你的童年带不走的是藏在你内心深处的那颗童心其实程序员都挺幼稚得啦哈哈常用标签页面结构设置宽度，为一个正整数，或字符串设置高度，一般设置了宽度，会自动解析出高度，可以不用设置
走了程序媛这条路
英式吐槽：不经历风雨 怎么有夏天
2017.6.1
岁月带走的是你的童年
带不走的是藏在你内心深处的那颗童心
Ps:其实程序员都挺幼稚得啦O(∩_∩)O哈哈~
1. H5页面结构
// width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数 // maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数 // user-scalable 是否允许手动缩放
2.其他Meta标签
H5标准声明，使用 HTML5 doctype，不区分大小写
标准的 lang 属性写法
声明文档使用的字符编码
页面描述
页面关键词
网页作者
搜索引擎抓取
iOS 设备 begin
启用360浏览器的极速模式(webkit)
优先使用 IE 最新版本和 Chrome
3.页面缓存设置
常见问题 移动端如何定义字体 font-family
@ --------------------------------------中文字体的英文名称
@ 宋体 SimSun
@ 黑体 SimHei
@ 微信雅黑 Microsoft Yahei
@ 微软正黑体 Microsoft JhengHei
@ 新宋体 NSimSun
@ 新细明体 MingLiU
@ 细明体 MingLiU
@ 标楷体 DFKai-SB
@ 仿宋 FangSong
@ 楷体 KaiTi
@ 仿宋_GB2312 FangSong_GB2312
@ 楷体_GB2312 KaiTi_GB2312
@
@ 说明：中文字体多数使用宋体、雅黑，英文用Helvetica
body { font-family: Microsoft Yahei,SimSun,Helvetica; }
引用iconfont字体方法
点击查看如何引用iconfont字体
打电话发邮件发短信怎么实现打电话给:15221639774 发短信给: 10086 点击我发邮件点击元素产生背景或边框怎么去掉
//ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩；
//android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果；
//winphone系统,点击标签产生的灰色半透明背景，能通过设置去掉；
//特殊说明：有些机型去除不了，如小米2。对于按钮类还有个办法，不使用a或者input标签，直接用div标签
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
}
// 也可以
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
手机拍照和上传图片
/IOS有拍照、录像、选取本地图片功能，部分Android只有选择本地图片功能。Winphone不支持 屏幕旋转的事件和样式//JS处理 function orientInit(){ var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?"landscape":"portrait"; if(orientChk =="lapdscape"){ //这里是横屏下需要执行的事件 }else{ //这里是竖屏下需要执行的事件 } } orientInit(); window.addEventListener("onorientationchange" in window?"orientationchange":"resize", function(){ setTimeout(orientInit, 100); },false) //CSS处理 //竖屏时样式 @media all and (orientation:portrait){ } //横屏时样式 @media all and (orientation:landscape){ }超实用的CSS样式* { padding: 0; margin: 0; border: 0;} input, textarea, button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; vertical-align: middle; } ul, li { list-style-type: none; } body { min-width: 320px; max-width: 640px; margin: auto;background: none;} em { font-style: normal; } //改变输入框placeholder的颜色值 ::-webkit-input-placeholder { /* WebKit browsers */color:#999;} :-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#999;} ::-moz-placeholder { /* Mozilla Firefox 19+ */color:#999;} :-ms-input-placeholder { /* Internet Explorer 10+ */color:#999;}audio元素和video元素在ios和andriod中无法自动播放//音频，写法一 //音频，写法二 //JS绑定自动播放（操作window时，播放音乐） $(window).one("touchstart", function(){ music.play(); }) //微信下兼容处理 document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false); //小结 //1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常 //2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间JS判断微信浏览器function isWeixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger"){ return true; }else{ return false; } }消除transition闪屏.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }box-sizing: border-box的作用当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。 例如：Jsonp原理举个例子.box { width: 500px; height:100px; border: 1px solid #000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 如果这时候你加上一个内边距属性，padding: 10px; 这个div不会撑开，即你所见的边框位置没有任何变动，但是“举个例子”这句话会和div边框有10px的间距。 一般在写页面的时候用这个属性就不会再考虑边框和内边距会改变整体所占宽度，即不用再根据盒子模型再去计算，省去很多麻烦。原理：而jsonp就是利用了
Linux常用命令
需要进入目录文件git add +文件冲突路径解决冲突一定不要忘记这一步哦
| 命令 | 作用 | |
|---|---|---|
| pwd | 显示当前操作路径 | |
| ls | 列出当前目录所有文件 | |
| ls-al | 查看隐藏文件 | |
| rm | 移除某个文件 | |
| open | 打开当前目录视图 | |
| history | grep npm | 查找历史记录 |
| cd $COMPANY | /Users/apple/Documents/Project/Maiqi | |
| cat | 查看 | |
| tail -f nohup.out | 查看日志消息 | |
| vim filename | 打开文件 | |
| git status | 查看当前代码状态 | |
| git diff | 查看修改文件 | |
| q | 退出 | |
| npm run all npm run listen |
| 命令 | 作用 |
|---|---|
| command+shift+F | 格式化 |
| command+T | 查找文件 |
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112050.html
摘要：四总结前端性能测试方案当然，前端性能不仅仅表现在白屏卡顿问题，也有可能是手机过度发热等等。从用户核心体验出发，我们认为，前端性能最重要的参考标准就是要以最轻量的方式，给用户最好的体验。 H5 页面发版灵活，轻量，又具有跨平台的特性，在业务上有很多应用场景。但是同时对比 App，H5 的性能表现总是要逊色一筹，比如页面打开往往会出现白屏，滑动列表等交互场景下也不如 Native 页面流畅...
摘要：前言微信小程序中可以直接运行页面，这一新组件的产生，可能直接导致小程序数量迎来一波高峰。微信小程序配置系列问题配置域名业务域名中配置的就是小程序以及和中引用的域名。 今日励志语 要接受自己行动所带来的责任而非自己成就所带来的荣耀。 前言 微信小程序中可以直接运行 web 页面，这一新组件 web-view 的产生，可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型，微信小程序后台...
摘要：前言微信小程序中可以直接运行页面，这一新组件的产生，可能直接导致小程序数量迎来一波高峰。微信小程序配置系列问题配置域名业务域名中配置的就是小程序以及和中引用的域名。 今日励志语 要接受自己行动所带来的责任而非自己成就所带来的荣耀。 前言 微信小程序中可以直接运行 web 页面，这一新组件 web-view 的产生，可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型，微信小程序后台...
摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...
摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...
摘要：并且除了常用的端，还要考虑微信端，或者是端。所以我们要有一套机制，在端上走的代码，在端或者微信端上走端对应的代码。对于一个从零开始的移动端项目，我总结了以上这些移动开发难点，希望之后的人能少踩点坑，站在我的肩膀上提高项目开发的效率和质量。 从零搭建移动H5开发项目实战 前端H5的前世今身 在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多...
阅读 3205·2021-10-11 10:58
阅读 1782·2019-08-30 15:54
阅读 3477·2019-08-29 13:07
阅读 3010·2019-08-29 12:39
阅读 1658·2019-08-26 12:13
阅读 1395·2019-08-23 18:31
阅读 2057·2019-08-23 18:05
阅读 1723·2019-08-23 18:00
