移动端爬坑记 --- （1）布局与样式上的奇葩偶遇

前言

汇总下自己搞移动端遇到掉进去的坑，以及脱坑的方案；

Flex兼容

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+ */

}

var AUTOPREFIXER_BROWSERS = [
'ie >= 9',
'ie_mob >= 9',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 2.3',
'bb >= 10'
];

width:0

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

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

IOS 遮罩层较好方案

position:absolute

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

// 防止内容区域滚到底后引起页面整体的滚动
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和android下触摸元素时出现半透明灰色遮罩

/*E:这个是代指字符，实际自己替换，ID,CLASS,TAG*/
-webkit-tap-highlight-color:rgba(255,255,255,0)

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)

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键盘事件调用缓慢

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

页面高度渲染错误

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

怪异悬浮的表单

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

其他一些建议