移动端适配问题收集

重置样式相关
移动端浏览器（部分iphone）横竖屏切换时，字体大小变化
检索或设置移动端页面中对象文本的大小调整。
该属性只在移动设备上生效；
如果你的页面没有定义meta viewport，此属性定义将无效；

之前有人提到过使用该属性取消浏览器最小字体限制，已经无效了
-webkit-text-size-adjust: 100%|none;
只对chrome27.0 版本以下有效，27.0以上版本无效；
只对英文才有效，对中文无效。

使用：
-webkit-text-size-adjust : none|100% ;
-moz-text-size-adjust : none|100% ;
-ms-text-size-adjust : none|100% ;
text-size-adjust : none|100% ；
更推荐100%；none可能带来的副作用：这会导致仍然支持 -webkit-text-size-adjust: none;的桌面版的webkit浏览器无法人为放大文字大小

重设可点击元素的点击选中效果
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，默认会出现一个半透明的灰色背景，重设这个属性以实现自定义高亮特效
-webkit-tap-highlight-color

去除IOS下输入框、按钮阴影和圆角
input, select,textarea,button {border: 0; border-radius: 0; -webkit-appearance: none;appearance:none;}

禁用文本选中
user-select
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
可能的副作用：个别Android机型（Google Nexus，Android 4.2.2）输入框无法输入
https://stackoverflow.com/questions/12812587/phonegap-styles-webkit-user-select-none-disabling-text-field

两行省略

float定位移动端可能撑不开高度
ul li 使用内容撑开

fixed定位问题

1. safari下 可能出现的点透问题
   目前发现的复现场景：
   浏览器有标签栏，即打开多个页面
   更容易复现：页面y方向可滚动
   复现方式：竖屏加载页面切换横屏；横屏上下滑动隐藏导航栏以及显示导航栏时
2. 输入框弹出 fixed定位出错的问题？（新版本的ios已经修复）

滚动事件
常见滚动问题：

1. “滚动延迟"
   现象：
   当做页面scroll才显示某些元素的功能时，发现某些浏览器下(iphone)滚动期间即使滚动到指定位置并不会触发目标元素显示，而是要停止滚动后才会触发目标元素显示；

在滚动期间会禁止部分由监听scroll事件导致的页面渲染
已知会受到禁止：显示和隐藏（display:block|none） 透明度变化 dom节点增加
不会受到禁止：背景色、字色

解决： 自行实现滚动方案（touch transition动画），借助iscroll better-scroll等库
-webkit-overflow-scrolling: auto 设置在body上 safari会生效 微信内置不会生效
但即使生效 也仍有上述现象

2. 滚动穿透
   现象：底部页面高度>100%有 fixed 遮罩背景和弹出层时，弹出层的滚动会引起页面滚动
   即使设置 html body overflow:hidden也无效

解决思路：
弹窗出现时： 记录当前滚动位置 设置body为position:fixed
弹窗隐藏时： 恢复body的position设置，恢复当前滚动位置
副作用：弹窗的弹性滚动会失效
-webkit-overflow-scrolling: touch设置到目标弹窗上

横竖屏切换
mediaquery css方案
@media screen and (orientation:landscape)
@media screen and (orientation:portrait)

portrait: 指定输出设备中的页面可见区域高度大于或等于宽度
landscape: 其他所有情况

检测？切换事件？
应用场景：横竖屏切换dom节点不同，切换后需要状态同步
orientation（非标准，仅部分移动端浏览器支持）不建议使用
定时器检测
resize
if(window.innerWidth > window.innerHeight){
meta.init = 'landscape';
meta.current = 'landscape';
} else {
meta.init = 'portrait';
meta.current = 'portrait';
}
减少resize触发频率
进一步：
采用自定义事件订阅与发布模式
重写window.orientation事件
https://segmentfault.com/a/1190000006889504

滑动事件优化：滚动穿透 scroll监听延迟 停止滚动时 才会触发scroll事件 而不是实时触发
用了这个better-scroll（用了之后 window.resize失效？）
https://zhuanlan.zhihu.com/p/27407024

cal()兼容
js计算，设备宽度和高度获取
document.documentElement.clientHeight

一些奇怪的问题：
弹框百分比高度 在chrome模拟器和真机上展示不同
部分webview relative布局层级可能会被fixed定位层级覆盖（重绘时且即使zindex层级比较高）

其他文章收集
http://blog.csdn.net/hardgirls/article/details/51722519