移动端Web适配技巧-优快云博客

1、页面高度渲染错误
在各移动端浏览器中经常会出现这种页面高度100%的渲染错误，页面低端和系统自带的导航条重合了，高度的不正确我们需要重置修正它，通过javascript代码重置掉：

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

2、移动端点击事件出现高亮

-webkit-tap-highlight-color:rgba(0,0,0,0);
//-webkit-tap-highlight-color:transparent;

3、苹果手机的一些设置

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

如果content设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

4、format-detection设置。

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

format-detection 启动或禁用自动识别页面中的电话号码、邮箱地址。

5、禁止复制、选中文本

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

6、长时间按住页面出现闪退

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

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

Element{
    -webkit-appearance: none; 
}

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

Element {
    -webkit-tap-highlight-color:rgba(255,255,255,0)
}

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

*{
   -webkit-text-size-adjust:100%;  
}

10、顶部状态栏背景色

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

11、浏览器私有及其它meta

（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">//应用模式

（2）UC浏览器私有

<meta name="full-screen" content="yes">//全屏模式
<meta name="screen-orientation" content="portrait">//强制竖屏
<meta name="screen-orientation" content="landscape">//强制横屏
<meta name="browsermode" content="application">//应用模式