移动端疑难特性、兼容性

1.   safari浏览器字体不能自动随网页缩放调整大小

-webkit-text-size-adjust:100%

1.  点击<button><input>有灰色透明背景

-webkit-tap-highlight-color:rgba(0,0,0,0);   

1. 微信、QQ内置浏览器视频自动全屏

非腾讯域名的视频地址都会

1. iphoneX默认网页显示在安全区域内，不全屏

 

<meta name="viewport" content="viewport-fit=cover">

1. flex布局不兼容，加上前缀也不行（常见于华为或旧版iOS）

display: -webkit-box;

display: box;

display: -webkit-flex;

display: flex;

须声明box和flex两种。

1.  Android设置line-height有偏移不垂直居中

缘由：1. 字体不是偶数

           2. 用rem单位

解决方案：

           1. 字体变大

           2. 增长父元素，设置diaplay: table-cell; vertical-align: middle

           3. 元素放大两倍，再缩小

           4. line-height: 1; 用padding-top撑起父元素。

5. 用px单位           

           6. 用图片去显示

1.  iOS默认不可点击元素点击事件失效

当委托给一个元素添加click事件时，若是事件是委托到 document 或 body 上，而且委托的元素是默认不可点击的(如 div, span 等)，此时 click 事件会失效

解决方案：

1. 将 click 事件直接绑定到目标元素(即 .target ) 上
2. 将目标元素换成 <a> 或者 <button> 等可点击的元素
3. 给目标元素添加一个空的 onclick=""(<div class="target" onclick="">点击我!</div>)
4. 把 click 改为 touchend 或 touchstart（注意加上preventDefault）
5. 将 click 元素委托到非 document 或 body 的父级元素上
6. 给目标元素加一条样式规则 cursor: pointer; 

 

最后一种解决方案最简单，推荐。

8. 部分移动端浏览器不支持space-evenly

解决方案：

用space-arround代替，或经过设置宽度、margin等布局

9. 移动端（尤为是iOS）一些浏览器具备下拉回弹效果，fixed定位元素不跟着下拉

解决方案：

a. 放弃fixed定位

b. 如导航栏等要实现固定于顶部效果，无需跟着下拉，则用fixed定位

 

（持续更新中……）