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

flex布局问题

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

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

  • ios8.0 flex兼容性

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

移动端布局兼容性问题大杂烩_第1张图片
ios8.0兼容性.png
移动端布局兼容性问题大杂烩_第2张图片
ios8.0兼容性2.png
  • ios8.0 flex均等分问题

需要子元素增加 width:100%

移动端布局兼容性问题大杂烩_第3张图片
flex非均等分.jpg
移动端布局兼容性问题大杂烩_第4张图片
flex均等分2.jpg
  • 安卓手机上

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

移动端布局兼容性问题大杂烩_第5张图片
安卓图形被覆盖.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)

你可能感兴趣的:(移动端布局兼容性问题大杂烩)