[html5]浏览器及平台详细说明

QQ 浏览器（X5 内核）

QQ 浏览器（X5 内核）同样适用于微信，QQ等第三方应用页面开发。

html 代码:

1. <!-- 设置锁定横屏、竖屏显示模式，portrait（横屏），landscape（竖屏）-->
2. <meta name="x5-orientation" content="portrait|landscape">
3. <!-- 设置全屏显示页面 -->
4. <meta name="x5-fullscreen" content="true">
5. <!-- 开启页面以应用模式显示（全屏显示等） -->
6. <meta name="x5-page-mode" content="app">

360浏览器

设置 360 浏览器渲染模式：webkit 为极速内核，ie-comp 为 IE 兼容内核，ie-stand 为 IE 标准内核。

html 代码:

1. <meta name="renderer" content="webkit|ie-comp|ie-stand">

详情文档链接：浏览器内核控制Meta标签说明文档
360 浏览器就会在读取到这个标签后，立即切换对应的极速核。 另外为了保险起见再加入

html 代码:

1. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。

UC 浏览器

设置屏幕方向

portrait 为横屏，landscape 为竖屏。

html 代码:

1. <meta name="screen-orientation" content="portrait|landscape">

设置全屏

html 代码:

1. <meta name="full-screen" content="yes">

设置适应屏幕排版（缩放是否显示滚动条）

UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。

html 代码:

1. <meta name="viewport" content="uc-fitscreen=no|yes">

排版模式

UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。

html 代码:

1. <meta name="layoutmode" content="fitscreen|standard">

夜间模式

可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。

注意：页面内的 frame/iframe 中的夜间模式的 meta 不生效。

html 代码:

1. <meta name="nightmode" content="enable|disable">

整页图片强制显示

为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。

**注意：整页图片强制显示仅对当前页面生效，对页面内的 frame/iframe 不生效，也不影响前进后退的页面

html 代码:

1. <meta name="imagemode" content="force">

开启应用模式

html 代码:

1. <meta name="browsermode" content="application">

应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:

缩放字体

例如：禁用的 UC 浏览器的字体缩放功能

html 代码:

1. <meta name="wap-font-scale" content="no">

具体UC 浏览器文档链接：UC 浏览器文档

Apple iOS原生浏览器

添加智能 App 广告条

告诉浏览器这个网站对应的app，并在页面上显示下载banner，需要注意的是Smart App Banners标签不能用在frame框架内部，否则不起作用。

其中app-id(必须), affiliate-data (可选), app-argument (可选)

html 代码:

1. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

例如Digg的写法：

html 代码:

1. <meta name="apple-itunes-app" content="app-id=362872995, affiliate-data=bevbOqLt02I, app-argument=digg://">

忽略数字自动识别为电话号码

html 代码:

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

启用 WebApp 全屏模式

html 代码:

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

添加到主屏后设置状态栏的背景颜色

html 代码:

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

只有在 “apple-mobile-web-app-capable” content=”yes” 时生效。

• 如果设置为 default 或 black ，网页内容从状态栏底部开始。
• 如果设置为 black-translucent ，网页内容充满整个屏幕，顶部会被状态栏遮挡。

添加到主屏后的标题（iOS 6 新增）

html 代码:

1. <meta name="apple-mobile-web-app-title" content="App Title">

iOS 图标

图片自动处理成圆角和高光等效果。

html 代码:

1. <link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

禁止系统自动添加效果，直接显示设计原图。

html 代码:

1. <link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png">

iOS 8+ 不再支持 precomposed, 只有 apple-touch-icon 是必须的
在大多数情况下，在head中一个180×180px的图标就足够了。如果您想要由设备确定的唯一图标，请使用不同大小的图标。

html 代码:

1. <link rel="apple-touch-icon" sizes="57x57" href="path/to/icon@57.png">
2. <link rel="apple-touch-icon" sizes="72x72" href="path/to/icon@72.png">
3. <link rel="apple-touch-icon" sizes="114x114" href="path/to/icon@114.png">
4. <link rel="apple-touch-icon" sizes="144x144" href="path/to/icon@144.png">

启动画面 ( 不赞成使用 )

iPad 的启动画面是不包括状态栏区域的，iPhone 和 iPod touch 的启动画面是包含状态栏区域的

html 代码:

1. <link rel="apple-touch-startup-image" href="path/to/startup.png">

具体描述设置请查看http://www.css88.com/archives/5480中相应的说明。

iOS 应用深度链接

html 代码:

1. <meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
2. <link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

Google Android原生浏览器

标签页选项卡颜色

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

html 代码:

1. <meta name="theme-color" content="#db5945">

添加到主屏

html 代码:

1. <!-- 添加到主屏 -->
2. <meta name="mobile-web-app-capable" content="yes">

详细链接: https://developer.chrome.com/multidevice/android/installtohomescreen

安卓应用深度链接（网页上唤起应用）

html 代码:

1. <!-- Android app deep linking -->
2. <meta name="google-play-app" content="app-id=package-name">
3. <link rel="alternate" href="android-app://package-name/http/url-sample.com">

注：貌似没测试成功，如果你知道如何正确设置，欢迎留言斧正。