移动/手机前端开发入门总结

我的博客：

http://mcchen.club

---

 

 

1.首先是meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 --> <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 --> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，好比黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no"> <!-- 适应移动端end -->

 

2.Html5+Css3的使用

　　由于手机大多数都是高级浏览器，HTML5能够实现一些HTML4中没法实现的丰富的WEB应用程序的体验，能够减小开发者不少的工做量，固然了你决定使用HTML5前，必定要对此很是熟悉，要知道HTML5的新标签的做用。好比定义一块内容或文章区域可以使用section标签，定义导航条或选项卡能够直接使用nav标签等等。

　　按钮带有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3写是没法写出来的，固然圆角可使用CSS3来写，但高光和内发光却没法使用CSS3编写，

这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂的样式属性。

　　还有渐变，动画等你可以想象出的各类酷炫狂拽吊炸天的效果。

 

3.块级化a标签　　

　　由于大多数都是触屏手机，要让用户很方便的能点击到标签，建议用42X42。操做对象的大小符合手指的操做，按键的大小设置规范：食指点击的间距 约为7*7 mm， 1mm间距，拇指点击8*8 mm，2mm间距。当前推荐的值为9mm 大小，最小应不小于7mm。

 

4.自适应布局

　　在编写CSS时，我不建议前端工程师把容器（不论是外层容器仍是内层）的宽度定死。为达到适配各类手持设备，我建议前端工程师使用自适应布局模式（支付宝采用了自适应布局模式），由于这样作可让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都可以正常的显示，你无需再次考虑设备的分辨率。页面必须自适应屏幕大小，能够采用流体布局。其它一些小问题能够采用media query，好比对于图片的处理，只要设置宽度，让图片自适应，防止图片变形，固然要兼容的设备分辨率差距很大的时候，须要利用media queries根据分辨率的不一样加载不一样的图片（须要同一张设置为几种不一样的规格）,一是防止小分辨率设备加载大图片浪费流量，二是防止大分辨率设备加载小图片致使的图片模糊问题。

 

5.适当优雅降级

　　要作好优雅降级（平稳退化），少用JS，图片，要用户禁止下载JS和图片的时候页面也能体现价值（由于不少APP默认设置为3G下是不自动下载图片等资源的）。

 

6.字体大小与行间距

　　不建议使用px/em，而使用rem，虽然它是相对单位，但使用rem单位能够避开不少层级的关系而行间距则直接是采用字体的倍数。为了方便计算，在html元素中常将font-size设为62.5%。注意在chorme是会强制等于12的~

 

 

七、IOS在第三方输入法下不支持onkeyup事件 
使用oninput进行代替onkeyup事件 
$("#user-name")[0].oninput = function() { 
that.checkusername(); 
};

 

八、部分android系统中元素被点击时产生的边框怎么去掉 
android用户点击一个连接，会出现一个边框或者半透明灰色遮罩, 不一样生产商定义出来额效果不同，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

a,button,input,textarea{ 
-webkit-tap-highlight-color: rgba(0,0,0,0;) 
-webkit-user-modify:read-write-plaintext-only; 
} 
-webkit-user-modify有个反作用，就是输入法再也不可以输入多个字符

另外，有些机型去除不了，如小米2

对于按钮类还有个办法，不使用a或者input标签，直接用div标签

 

九、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 
<meta name="msapplication-tap-highlight" content="no">

 

十、webkit表单元素的默认外观怎么重置 
.css{-webkit-appearance:none;}

 

十一、移动端如何清除输入框内阴影 
在iOS上，输入框默认有内部阴影，但没法使用 box-shadow 来清除，若是不须要阴影，能够这样关闭：

input, 
textarea { 
　　border: 0; /* 方法1 / 
　　-webkit-appearance: none; / 方法2 */ 
}

 

十二、移动端禁止选中内容 
.user-select-none { 
-webkit-user-select: none; /* Chrome all / Safari all / 
-moz-user-select: none; / Firefox all （移动端不须要） / 
-ms-user-select: none; / IE 10+ */ 
}

 

1三、移动端取消touch高亮效果 
在作移动端页面时，会发现全部a标签在触发点击时或者全部设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，若是不想要这个高亮，那么你能够经过css如下方法来进行全局的禁止：

html { 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 
但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转连接的a标签换成其它标签，能够解决这个问题。

 

1四、如何禁止保存或拷贝图像（IOS） 
一般当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，若是你不想让用户这么操做，那么你能够经过如下方法来禁止：

img { -webkit-touch-callout: none; }

 

1五、屏幕旋转的事件 
window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

window.onorientationchange = function(){ 
switch(window.orientation){ 
case -90: 
case 90: 
alert("横屏:" + window.orientation); 
case 0: 
case 180: 
alert("竖屏:" + window.orientation); 
break; 
} 
}

 

1六、audio元素和video元素在ios和andriod中没法自动播放 
应对方案：触屏即播

$('html').one('touchstart',function(){ 
audio.play() 
})

 

1七、手机拍照和上传图片 

<input type=file accept="image/*"> 

<input type=file accept="video/*"> 
使用总结：

ios 有拍照、录像、选取本地图片功能 
部分android只有选取本地图片功能 
winphone不支持 
input控件默认外观丑陋

 

1八、消除transition闪屏 
.css{ 
/设置内嵌的元素在 3D 空间如何呈现：保留 3D/ 
-webkit-transform-style: preserve-3d; 
/（设置进行转换的元素的背面在面对用户时是否可见：隐藏）/ 
-webkit-backface-visibility: hidden; 
} 
开启硬件加速

解决页面闪白 
保证动画流畅

.css { 
-webkit-transform: translate3d(0, 0, 0); 
-moz-transform: translate3d(0, 0, 0); 
-ms-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 
} 
设计高性能CSS3动画的几个要素

尽量地使用合成属性transform和opacity来设计CSS3动画， 不使用position的left和top来定位 利用translate3D开启GPU加速