移动端页面开发通用问题解决方案

1、使各个手机型号展示的css页面相同的问题

　　解决方案：引入reset.css文件

@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

2、移动端1像素边框问题

　　由于移动端的屏幕的分辨率不同，比较好一点的手机屏幕的分辨率高，可能是二倍屏或者是3倍屏，这样的话，我们写border:1px solid black; 这样的代码，实际在这种高分辨率的屏幕上显示的是2px或者3px。

　　解决方案：引入一个border.css文件，代码如下：

@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
  position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
  content: "020";
  overflow: hidden;
  position: absolute;
}
/* border
 * 因，边框是由伪元素区域遮盖在父级
 * 故，子级若有交互，需要对子级设置
 * 定位 及 z轴
 */
.border::before {
  box-sizing: border-box;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
  left: 0;
  width: 100%;
  height: 1px;
}
.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
  top: 0;
  width: 1px;
  height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
  border-top: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
  border-right: 1px solid #eaeaea;
  transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
  border-bottom: 1px solid #eaeaea;
  transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
  border-left: 1px solid #eaeaea;
  transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
  top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
  right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
  bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
  left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
  /* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
  .border::before {
     200%;
    height: 200%;
    transform: scale(.5);
  }
  .border-top::before,
  .border-bottom::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-topleft::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-bottomleft::before {
    transform: scaleY(.5);
  }
  .border-right::before,
  .border-left::before,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-topright::after,
  .border-bottomleft::after {
    transform: scaleX(.5);
  }
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
  .border::before {
     300%;
    height: 300%;
    transform: scale(.33333);
  }
  .border-top::before,
  .border-bottom::before,
  .border-topbottom::before,
  .border-topbottom::after,
  .border-topleft::before,
  .border-rightbottom::after,
  .border-topright::before,
  .border-bottomleft::before {
    transform: scaleY(.33333);
  }
  .border-right::before,
  .border-left::before,
  .border-rightleft::before,
  .border-rightleft::after,
  .border-topleft::after,
  .border-rightbottom::before,
  .border-topright::after,
  .border-bottomleft::after {
    transform: scaleX(.33333);
  }
}

3、移动端中点击延迟的问题

　　在移动端的某些浏览器上点击click会延迟300毫秒再执行

　　解决方案：

　　　　项目中安装 fastclick 第三方的包安装到项目依赖中：npm install fastclick --save  命令进行安装。

　　移动端上touch事件有四个，其触发顺序为： touchstart -> touchmove -> touchend -> touchcancel

　　注：对于某些 android 系统 touch 的 bug: 

　　比如手指在屏幕由上向下拖动页面时，理论上是会触发 一个 touchstart ，很多次 touchmove ，和最终的 touchend ，可是在android 4.0上，touchmove只被触发一次，触发时间和touchstart 差不多，而touchend直接没有被触发。这是一个非常严重的bug，在google Issue已有不少人提出 ,这个很蛋疼的bug是在模拟下拉刷新是遇到的尤其当touchmove的dom节点数量变多时比出现，当时解决办法就是用settimeout来稀释touchmove。

4、<meta>元素

　　meta 标签位于 head 标签之间，是 HTML 语言的一个辅助性标签，合理的设置在移动端中起着非常重要的作用。下面列举几个常用的用法：

　　

        // 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">

        // 禁止百度SiteApp转码声明
        <meta http-equiv="Cache-Control" content="no-siteapp">

        // 禁止自动识别电话和邮箱；
        <meta name="format-detection" content="telephone=no, email=no">

        // 指定iphone中safari顶端的状态条的样式(default：白色；black：黑色；black-translucent ：半透明)；
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

        // 添加到 IOS 主屏后的标题 
        <meta name="apple-mobile-web-app-title" content="去哪">

        // 隐藏地址栏，启用 WebApp 全屏模式
        <meta name="apple-mobile-web-app-capable" content="yes">

       // 优先使用 IE 最新版本和 Chrome
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

        // 注明作者
        <meta name="author" content="www.jiawin.com">

5、font-family 字体选择

　　iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi（中文名称叫黑体-简）。设计时候一般用华文黑体来代替，两者差异微小。

body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}

6、使用 rem 替代 em 单位

　　rem（root element，html）是 CSS3 新增的一个相对单位，相对于根目录的 em 而不是相对于父元素，也就是说，它虽然是相对值，但是只是相对于根目录来说的（也就是 html），它不会随着其它元素的改变而改变。通过它既可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。从而可以有效的快速保持任何分辨率下保持视觉一致。

7、禁止选择

当你希望页面上的文字或者图片不被用户选择时候亦或者禁止长按保存图片时，可以使用这个方法来实现。是不是很方便的说，但注意的是不可滥用，否则会出现一些无法输入或者点击的情况。

    a, img {
       -webkit-touch-callout:none;  /* 禁止长按链接与图片弹出菜单 */
    }

    html, body {
       -webkit-user-select:none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
       user-select:none;
    }

8、html5重力感应事件

　　手机摇一摇抽奖，大部分核心代码就是这个。

        if (window.DeviceMotionEvent) { 
            window.addEventListener('devicemotion',deviceMotionHandler, false);  
        } 
        var speed = 30;//speed
        var x = y = z = lastX = lastY = lastZ = 0;
        function deviceMotionHandler(eventData) {  
            var acceleration =event.accelerationIncludingGravity;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {
                alert('别摇那么大力嘛...');
                // your code here
            }
            lastX = x;
            lastY = y;
            lastZ = z;
        } 

9、开启硬件加速优化动画效果

如果你涉及到动画制作，是否经常发现在PC端效果非常不错，但是到了手机上就卡翔了。这个时候我们可以通过CSS开启硬件加速来改善动画效果，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速。CSS animations, transforms 以及 transitions 默认是不会自动开启GPU加速，而是需要某些CSS规则来触发，例如：transform: translate3d。开启硬件加速后可以解决页面闪白等问题，可以让渲染更流畅。

10、布局使用display弹性自适应

内容排版布局显示，尽量少使用float，建议使用display的box、flex等（多栏）自适应布局；优点表现在：

• 独立的高度控制与对齐
• 独立的元素顺序
• 指定元素之间的关系
• 灵活的尺寸和对齐方式

11、base64编码图片替换小图片

　　对于一些小图片icon之类的，可以将图片用base64编码，来减少网络请求。但是对于大图，就不要使用base64编码了，不然你的代码会变成无底洞，拉代码滚动条拉到你想哭。编码和解码也需要计算量，比较耗费CPU。

　　base64有以下几个优点：

• 减少了HTTP网络请求
• 避免某些文件跨域的问题
• 修改无需清缓冲，立即生效

12、增加按钮:active反应效果

　　当用户在操作按钮的时候，如果按钮还是死死的，没有任何反应，这样子的体验是很差的，甚至是反人类的。在pc端我们都会习惯加上hover属性，来改变按钮状态；但移动端可不买这家伙的帐，在移动端没有鼠标一说，这个时候我们就可以让active上场了，带来的效果也是杠杠的。

13、设置CSS3(@media)横竖屏样式

　　

    //竖屏时使用的样式
    @media all and (orientation:portrait) {
        code here ...
    }

    //横屏时使用的样式
    @media all and (orientation:landscape) {
            code here ...
    }

14、CSS3动效类型

常见的CSS3动画效果类型：

　　

 参考

　　http://www.jiawin.com/mobile-web-development-solution