论移动端使用什么做适配好！！！！

今天要写这个话题，是因为做了很多个移动项目了，使用过js做适配，也使用过media媒体查询配合bootstrap等，各种方式。but，前两天一个项目快做完了，出了很大的bug，影响交付的那种明显的bug【其实也不是非常明显，有时得靠测试】，在此详细说明一下：

在ip6，ios9左右的系统，使用media会出现页面打开忽大忽小的闪动问题，查了很多，最后发现ios9不在支持media的部分属性还是啥的，导致客户的低版本系统出现严重的bug。

这个bug之前排查了好久，各种js，css，怕冲突，排查好多，最后才确定了是使用media适配的关系……然后坑爹的改用js做适配，重新量尺寸，改尺寸。不过总算是找到问题，并解决了。

 

还有页面底部使用fixed定位也会导致ios的很多问题，在此推荐使用position: absolute；

分为头部，中间，底部三部分，中间部分，需要加下面两个属性

overflow-y: scroll; //允许y轴滑动

-webkit-overflow-scrolling: touch; //增加滑动的弹性

 

具体copy一下：

html {
-ms-touch-action: none;
}
:root ,body{height:100%;}/* 定义页面内容为一屏展现 这2个标签都必须设置高度100% */
body{display:-webkit-box;display:box;-webkit-box-orient:vertical;}/* 定义页面为弹性盒子模型 内容垂直布局 */

//底部
#footernav{position: absolute;z-index: 2;bottom: 0;left: 0; height:.96rem;}

//中间
.main{position: absolute;z-index: 1; top: 0px; bottom: .96rem; left: 0px;width:100%;-webkit-box-flex:1;box-flex:1;overflow-y: scroll; -webkit-overflow-scrolling: touch; }
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}