移动页面注意事项

/**页面自适应屏幕
   解决，在每个页面引入一个计算屏幕分辨率的js文件，代码如下
**/
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize =Math.floor(100*(clientWidth / 1080))+ 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);

/**禁止页面缩放**/
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

/**定义最大宽度和最小宽度**/
移动端会自适应屏幕，如果无限制的放大或者缩小，会影响用户体验。
{
    max-width:640px;
    min-width:320px;
}
/**取消a 标签背景**/
a,button,input,optgroup,select,textarea 
{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
/***禁止长按 a，img 标签长按出现菜单栏**/
a, 
img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}
/**增加滚动的流畅度**/
body{
    -webkit-overflow-scrolling:touch;
}

/**取消Android和IOS各自的默认样式和禁止一些默认功能**/
<meta name="format-detection" content="telphone=no, email=no"/>//禁止邮箱和手机号默认点击事件。
-webkit-appearance: none; //该css样式取消在ios上input的默认边框
-webkit-appearance: value;//设定元素以value的方式进行渲染

-webkit-appearance:button;//以按钮的方式进行渲染
   -moz-appearance:button;
value的值有：button  listbox  listitem  searchfield  textarea  menulist

/**获取滚动条的值**/
pc端是通过document.scrollTop和document.scrollLeft得到的。
ios端是通过window.scrollY window.scrollX获得的。
Android端是通过window.scrollY window.scrollX和document.scrollTop document.scrollLeft都可以。
所以为了兼容移动端获取滚动条的值统一使用window.scrollY window.scrollX。

/**　禁止选择文本**/
{
    -webkit-user-select:nonel;
}
/**屏蔽阴影**/
{
    -webkit-appearance:none;
}

/**动画效果时开启硬件加速**/
{
    transform: translate3d;
}