移动端开发注意事项

移动前端开发正逐渐步入前端技术的主流，事实上跟在一般的PC上，并不需要你掌握额外的技术，然而你在PC Web上那一套在多数情况下并不适用于手机Web，你必须知道这其中的注意点。

一.meta 的使用

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

• 第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览，viewport：能优化移动浏览器的显示。
• 第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
• 第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
• 第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

 

 二.针对适配等比缩放的方法

@media only screen and (min-width: 1024px){
　　body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
　　body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
　　body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
　　body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
　　body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
　　body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
　　body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
　　body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
　　body{zoom:1.125;}
}

或如：

@media all and (orientation : landscape) { 

　　h2{color:red;}/*横屏时字体红色*/

} 

@media all and (orientation : portrait){ 

　　h2{color:green;}/*竖屏时字体绿色*/

} 

三.HTML5标签的使用

在开始编写webapp时，建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。

四.块级化a标签

请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。

五.布局

1.布局使用百分比：

　　不同的手机有着不同的分辨率，这时再用我们pc端布局常用的px就不合适了。使用百分比布局要时时刻刻清楚其父元素，因为子元素的百分比高度是根据父元素的高度来确定的，当父元素的高度为不确定值时，或者说父元素的高度未定义时，子元素的高度百分比将没有用（没有参照物）。所以只有设置了父元素的高度，子元素的高度百分比才会有用。

2.em与rem：
　　em是根据相对单位，不是固定的，他会继承父级元素的字体大小，若没有父级则em的相对基准点为浏览器的字体大小，浏览器的字体默认为16px，因此若无父级元素，相对于浏览器大小：Xem=X*16px;
rem是css3新增属性，是完全相对于HTML根元素大小设定的，默认为10px，因此无论父级字体大小，1rem=10px。

3.栅格布局：
　　box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局。

4、wap页面有img标签，记得加上display：block；属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。

5、有关Flexbox弹性盒子布局一些属性
　　1、不定宽高的水平垂直居中
　　.xxx{
　　　　position:absolute;
　　　　top:50%;
　　　　left:50%;
　　　　z-index:3;
　　　　-webkit-transform:translate(-50%，-50%)；
　　　　border-radius:6px;
　　　　background:#fff;
　　}
　　2、[flexbox版]不定宽高的水平垂直居中
　　.xx{
　　　　justify-content:center;//子元素水平居中，
　　　　align-items:center;//子元素垂直居中;
　　　　display:-webkit-flex;
　　}

六.文本的处理

1、//单行文本溢出

　　.xx{
　　　　overflow:hidden;
　　　　white-space:nowrap;
　　　　text-overflow:ellipsis;
　　}
2、//多行文本溢出
　　.xx{
　　　　display:-webkit-box !important;
　　　　overflow:hidden;
　　　　text-overflow:ellipsis;
　　　　word-break:break-all;
　　　　-webkit-box-orient:vertical;
　　　　-webkit-line-clamp:2;(数字2表示隐藏两行)
　　}

七、图片、媒体的处理

1、//使用流体图片
　　img{
　　　　width:100%;
　　　　height:auto;
　　　　width:auto\9;
　　}

2、audio元素和video元素在ios和andriod中无法自动播放
　　应对方案：触屏即播
　　$('html').one('touchstart',function(){
　　　　audio.play()
　　})

3、如何禁止保存或拷贝图像
　　通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：
　　img {
　　　　-webkit-touch-callout: none;
　　}
　　PS：需要注意的是，该方法只在 iOS 上有效。

八、圆角设置

　　放一个图片或者一个按钮，设置圆角会比较美观，设置圆角的值可以用百分比，也可以用em等单位。　

　　element{
　　　　border: 1px solid #ccc;
　　　　-moz-border-radius: 百分比;
　　　　-webkit-border-radius: 百分比;
　　　　border-radius: 百分比;
　　}

九、禁止内容

1、禁止文本缩放
html {
-webkit-text-size-adjust: 100%;
}

2、移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：
　　.user-select-none {
　　　　-webkit-user-select: none;
　　　　-moz-user-select: none;
　　　　-ms-user-select: none;
　　　}
　　兼容IE6-9的写法：onselectstart="return false;" unselectable="on"

 

十、边距凹陷

1、像素边框（例子:移动端列表的下边框）
　　.list-iteam:after{
　　　　position: absolute;
　　　　left: 0px;
　　　　right: 0px;
　　　　content: '';
　　　　height: 1px;
　　　　transform: scaleY(0.5);
　　　　-moz-transform: scaleY(0.5);
　　　　-webkit-transform:scaleY(0.5);
　　}

2、 　

　　与在pc端开发一样，开发过程中需要的一个很需要注意的问题的边距塌陷，典型的问题是margin-top的嵌套，对子元素设置margin-top值，子元素相对于父元素的位置没有变，而父元素跟着子元素一起向下移动响应的距离。其原理可参考本人之前的笔记css之BFC学习笔记，解决方案：

1.给父元素div1设置一个padding值

　　.div1{
　　　　height: 500px;
　　　　width: 100%;
　　　　background: #ccc;
　　　　padding-top: 1px;
　　}

十一、如何关闭iOS中键盘自动大写

我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

十二、 IOS中input键盘事件keyup、keydown、keypress支持不是很好
问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻响应keyup事件，只有在通过删除之后才能响应！

解决办法：

可以用html5的oninput事件去代替keyup

<input type="text" id="testInput">
<script type="text/javascript">
    document.getElementById('testInput').addEventListener('input', function(e){
        var value = e.target.value;
    });
</script>
然后就达到类似keyup的效果！

十三、iOS中如何彻底禁止用户在新窗口打开页面

有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空，但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。

十四、如何解决Android 2.0以下平台中圆角的问题

如果大家够细心的话，在做wap站点开发时，大家应该会发现android 2.0以下的平台中问题特别的多，比如说边框圆角这个问题吧。

在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角：

1. -webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）；
2. 如果对针对边框做样式定义，比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。
3. 假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角，还有记住！-webkit这个前缀一定要加上！

十五.移动端框架推荐

1：weUI

官方网址：https://weui.io/

官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。

优点：
做为开发者的我们可以不用写太多css，直接拿过来就可以用。组件都有点击态，大大增加了用户的体验好感，高清屏幕下 border : 0.5

2：Frozen UI
专注于移动web的UI框架,基于腾讯手机QQ规范... FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库

官方网址：http://frozenui.github.io/
http://frozenui.github.io/components.html#poptips

优缺点：
基础样式效果简单色调清爽

3：MUI
最接近原生APP体验的高性能前端框架，可多端发布到Appstore、Android市场、浏览器、微信公众号、百度直达号及流应用

官方网址：http://dev.dcloud.net.cn/mui/

优缺点：这个框架给我的吸引之处就是它的 UI 是以 IOS 为 主体设计的，当然它也补充了android特有UI样式。并且MUI官方声称用来开发深入以后发现拿它做 APP 还能够提高用户使用流畅度但网址上对它的评价是一种深入骨髓的廉价感。

4：SUI Mobile

介绍 SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，阿里前端团队出品的SUIMobile的前端UI库，方便迅速搭建手机H5应用,也非常适合开发跨平台Web App

官方网站 http://m.sui.taobao.org/getting-started/

优缺点：
兼容性好，能兼到 iOS 6.0+ 和 Android 4.0+
风格：炫酷的iOS风格功能强大的组件轻量的UI库，开始使用，只需要几个简单的步骤

缺点：sui mobile会和jquery冲突:后期维护/编写都很麻烦，开发人员以及离职，大半年都没有维护了

Github：https://github.com/sdc-alibaba/SUI-Mobile
Demo：http://m.sui.taobao.org/demos/
专注于开发的：http://framework7.taobao.org/