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)
