移动端布局兼容性问题大杂烩

flex布局问题

• ios8.0 不支持flex-wrap属性

如果有需要折行的flex配置需要改成width：xx%的方式

• ios8.0 flex兼容性

需要子元素变成display:inline-block

ios8.0兼容性.png

ios8.0兼容性2.png

• ios8.0 flex均等分问题

需要子元素增加 width:100%

flex非均等分.jpg

flex均等分2.jpg

• 安卓手机上

核心原因： 分辨率不同，安卓手机底部普遍含有虚拟导航栏
解决办法： 外框flex布局，flex：1可以自动计算出不含虚拟导航栏的高度

安卓图形被覆盖.jpg

• css3在安卓手机上表现跟ios不一致

图片替代或者跟设计沟通，减少此类设计

error1.png

• 手机端 click 事件会有大约 300ms 的延迟

解决方案fastclick

• 基于rem响应式布局，chrome字体最小限制12px

解决方案： 设置font-size：625% => 1rem = 100px

• 针对retainer屏幕1px效果

-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;

• button、link按压仿原生背景变色

div:active{
    background-color:rgb(0,0,0,0.3)
}

• 基于rem响应式布局

(function(win, doc, dw) {
    var docEl = doc.documentElement,
            dw = dw || 640,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var docElWidth = docEl.clientWidth;
                (docElWidth > 640) && (docElWidth = 640);
                if (!docElWidth) return;
                docEl.style.fontSize = docElWidth / (640 / 100) + 'px';  //基于640px设计稿
            };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(window, document, 640)