移动WEB常见问题解决方案

2017-09-23

1、H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

1	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

2、忽略将页面中的数字识别为电话号码

1	<meta name="format-detection" content="telephone=no" />

3、忽略Android平台中对邮箱地址的识别

1	<meta name="format-detection" content="email=no" />

4、设置Web应用是否以全屏模式运行

1	<meta name="apple-mobile-web-app-capable" content="yes">

5、调用安卓或者ios的拨号功能

1	<a href="tel:10086">点击拨打10086</a>

6、禁止复制、选中文本

element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

7、长时间按住页面出现闪退、禁止ios&android长按时下载图片

1	-webkit-touch-callout: none;

8、iphone及ipad下输入框默认内阴影

1	-webkit-appearance: none;

9、ios和android下触摸元素时出现半透明灰色遮罩

1	-webkit-tap-highlight-color:rgba(255,255,255,0);

10、动画定义3D启用硬件加速

1 2	-webkit-transform:translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

11、Retina屏的1px边框

1	border-width: thin;

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

1
2
3

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

13、transition闪屏

1 2	-webkit-transform-style: preserve-3d; -webkit-backface-visibility:hidden;

14、某些Android手机圆角失效

1	background-clip: padding-box;

15、ios 设置input 按钮样式会被默认样式覆盖

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

16、IOS键盘字母输入，默认首字母大写

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

17、select 下拉选择设置右对齐

1
2
3

select option {
direction: rtl;
}

18、通过transform进行skew变形，rotate旋转会造成出现锯齿现象

1
2
3

-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)

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

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

20、IOS中input键盘事件keyup、keydown、keypress支持不是很好
问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻相应keyup事件，只有在通过删除之后才能相应！可以用html5的oninput事件去代替keyup:

<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('testInput').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>

21、部分机型存在type为search的input，自带close按钮样式修改方法

1
2
3

#Search::-webkit-search-cancel-button{
  display: none;
}

22、改变webkit表单输入框placeholder的颜色

1 2	input::-webkit-input-placeholder{color:#aaa;} input:focus::-webkit-input-placeholder{color:#eee;}

23、android 上去掉语音输入按钮

1	input::-webkit-input-speech-button {display: none}

24、android浏览器下，input域处于焦点状态时，默认会有一圈淡黄色的轮廓outline效果

1	outline: none;

25、控制元素在移动设备上是否使用滚动回弹效果

1
2

auto 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止
touch 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文

26、页面滚动不流畅，卡顿闪烁

ios端的-webkit-overflow-scrolling属性可控制页面滚动效果，设置如下实现惯性滚动和弹性效果：
1
-webkit-overflow-scrolling: touch

position属性导致的页面滚动不流畅问题：

<div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;">
    <div style="position: relative; height: 200px;"></div>
    <div style="position: relative; height: 200px;"></div>
    <div style="position: relative; height: 200px;"></div>
</div>

如上代码所示，当absolute定位的容器内存在relative定位并且高度大于外置容器时，容器的滚动会出现卡顿闪烁现象，解决方法如下所示：

<div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;">
    <div style="position: absolute; top: 0; left: 0;">
        <div style="position: relative; height: 200px;"></div>
        <div style="position: relative; height: 200px;"></div>
        <div style="position: relative; height: 200px;"></div>
    </div>
</div>

可以用一个absolute容器将内部relative元素包裹起来，便可解决滚动闪烁问题。