移动端布局与样式上的坑

移动端布局与样式上的深坑--（持续更新）

 

Flex兼容

Flex想要兼容众多花样式手机，要注意如下这么些

• 前缀要考虑2009~2012年的语法[webkit-box,flex,flex-box]
• 少用复合属性，好比flex:1，考虑兼容理应拆成[flex-grow,flex-shrink,flex-basis]；flex-flow拆开成[flex-direction,flex-wrap]

demo{ display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ }

 

IOS的H5页面scroll不流畅解决方案

在滚动包裹层添加这么一条私有前缀样式便可享受相似APP的滑动效果，不只丝滑，还带弹性！

.contain{ -webkit-overflow-scrolling : touch; }

IOS 遮罩层较好方案

拒绝采用fixed！！！！！

遮罩层采用position:absolute来置顶，内部元素采用flex来布局； 
这种写法能够避免一大堆天坑！！！

如果实在不信邪，滚动的时候，微信端这些你就会感觉到花儿为何这样红了。。。

IOS滚动窗滑动到底部还能弹窗拖拉的奇葩修复

这个方案是经过计算离底部多远加状态来阻止touch事件

// 防止内容区域滚到底后引发页面总体的滚动 var content = document.querySelector('main'); var startY; content.addEventListener('touchstart', function (e) { startY = e.touches[0].clientY; }); content.addEventListener('touchmove', function (e) { // 高位表示向上滚动 // 底位表示向下滚动 // 1允许 0禁止 var status = '11'; var ele = this; var currentY = e.touches[0].clientY; if (ele.scrollTop === 0) { // 若是内容小于容器则同时禁止上下滚动 status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01'; } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) { // 已经滚到底部了只能向上滚动 status = '10'; } if (status != '11') { // 判断当前的滚动方向 var direction = currentY - startY > 0 ? '10' : '01'; // 操做方向和当前容许状态求与运算，运算结果为0，就说明不容许该方向滚动，则禁止默认事件，阻止滚动 if (!(parseInt(status, 2) & parseInt(direction, 2))) { e.preventDefault(); stopEvent(e); } } });

 

 

IOS 默认输入框内阴影重置

/*E:这个是代指字符，实际本身替换，ID,CLASS,TAG*/ E{ border: 0; -webkit-appearance: none; }

旋转屏幕时，字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }

 

默认启用GPU渲染页面

这个具体要看你的实际做用范围，无非就经过一些特殊属性来强制开启 
- transform:translateZ(0): Z轴会启用GPU，请自行带前缀 
- 调用preserve-3d或者animation也会

transition闪屏

/设置内嵌的元素在 3D 空间如何呈现：保留3D / -webkit-transform-style: preserve-3d; / 设置进行转换的元素的背面在面对用户时是否可见：隐藏 / -webkit-backface-visibility:hidden;

placeholder的颜色值改变

input::-webkit-input-placeholder{color:#F40;} input:focus::-webkit-input-placeholder{color:#F40;}

 

移动端禁止选中内容

E { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all （移动端不须要） */ -ms-user-select: none; /* IE 10+ */ }

 

IOS禁止保存或拷贝图像

img { -webkit-touch-callout: none; }

 

经常使用的移动端meta

<!-- 禁止页面缩放 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!-- 设置Web应用是否以全屏模式运行。--> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 启动或禁用自动识别页面中的电话号码。--> <meta name="format-detection" content="telephone=no"> <!-- 设置缓存，看实际需求设置 --> <meta http-equiv="Cache-Control" content="no-cache" /> <!-- 优先使用最新版本 IE 和 Chrome--> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- QQ浏览器私有 --> <!-- 全屏模式 --> <meta name="x5-fullscreen" content="true"> <!-- 强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- 强制横屏 --> <meta name="x5-orientation" content="landscape"> <!-- 应用模式 --> <meta name="x5-page-mode" content="app"> <!-- UC浏览器私有 --> <!-- 全屏模式 --> <meta name="full-screen" content="yes"> <!-- 强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- 强制横屏 --> <meta name="screen-orientation" content="landscape"> <!-- 应用模式 --> <meta name="browsermode" content="application">

IOS中input键盘事件调用缓慢

直接改成监听input事件

document.getElementById('test').addEventListener('input',fn,false);

页面高度渲染错误

document.documentElement.style.height = window.innerHeight + 'px';

 

怪异悬浮的表单

在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，通过观察与测试发现只有input:password类型的输入框存在，那么咱们只要使用input:text类型的输入框并经过样式-webkit-text-security: disc; 隐藏输入密码从而解决。

input[type=text]{ -webkit-text-security: disc; }