移动端页面踩坑二

1.iPhone英文键盘如何取消首字母大写

　　<input type="text" v-model.trim="userName" class="mui-input-clear" placeholder="请输入用户名" autocapitalize="off" autocorrect="off">

　　关键性的代码是autocapitalize=”off” autocorrect=”off”

2.上下拉动滚动条时卡顿、慢　　

　　解决办法：添加样式

body {
 -webkit-overflow-scrolling: touch;
 overflow-scrolling: touch;
}

3.长时间按住页面出现闪退　

　　解决办法：添加办法

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

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

　　解决办法：添加样式

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

5.顶部状态栏背景色　　

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明：

• 除非你先使用apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作用。
• 如果content设置为default，则状态栏正常显示。如果设置为black，则状态栏会有一个黑色的背景。如果设置为blank-translucent，则状态栏显示为黑色半透明。
• 如果设置为default或blank，则页面显示在状态栏的下方，即状态栏占据上方部分，页面占据下方部分，二者没有遮挡对方或被遮挡。
• 如果设置为blank-translucent，则页面会充满屏幕，其中页面顶部会被状态栏遮盖住（会覆盖页面20px高度，而iphone4和itouch4的Retina屏幕为40px）。
• 默认值是default。

6.ios 设置input 按钮样式会被默认样式覆盖　

　　解决方法：添加样式

input,textarea {
 border: 0;
 -webkit-appearance: none;
}

7.IOS键盘字母输入，默认首字母大写　　

　　解决办法：autocapitalize

<input type="text" autocapitalize="off" />

8.消除 IE10 里面的那个叉号　　

　　解决办法：添加样式

input:-ms-clear{display:none;}

9.iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格　　

　　解决办法：正则去掉

this.value = this.value.replace(/u2006/g, '');

10.移动端 HTML5 audio autoplay 失效问题

　　问题：这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放

　　解决办法：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）

document.addEventListener('touchstart', function () {
     document.getElementsByTagName('audio')[0].play();
     document.getElementsByTagName('audio')[0].pause();
});

11.唤起select的option展开　　

　　zepto方式：

$(sltElement).trrgger("mousedown");

　　js方式:

function showDropdown(sltElement) {
     var event;
     event = document.createEvent('MouseEvents');
     event.initMouseEvent('mousedown', true, true, window);
     sltElement.dispatchEvent(event);
};

12.安卓浏览器看背景图片，有些设备会模糊。　　

　　原因：用同等比例的图片在PC机上很清楚，但是手机上很模糊，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。

　　解决办法：使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰

background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;
display:inline-block;
100%; 
height:50px;

　　或者指定 background-size:contain