[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标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:

参数	状态	说明
全屏	生效	可通过 meta 或 JS API 调用退出全屏
长按菜单	失效	可通过 JS API 调用重新生效
浏览器默认手势	失效	可通过 JS API 调用重新生效
排版模式	标准模式	可通过 meta 或 JS API 调用设置其他排版模式
强制图片显示	生效	/
夜间模式	失效	可通过 meta 或 JS API 调用启用夜间模式

缩放字体

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

html 代码: 来源：www.cuplayer.com

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 代码: 来源：www.cuplayer.com

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">

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

Apple Safari 浏览器

Safari 10开始支持固定书签页的SVG favicons了，你可以这样使用：

html 代码:

1. <!-- Pinned Site -->
2. <link rel="mask-icon" href="path/to/icon.svg" color="red">

类似的效果

扩展阅读：https://yoast.com/dev-blog/safari-pinned-tab-icon-mask-icon/

Google Chrome浏览器

关闭chrome浏览器下翻译插件

有些时候感觉chrome浏览器下翻译插件很烦人，可以通过下面的代码禁用它。

html 代码: 来源：www.cuplayer.com

1. <meta name="google" value="notranslate" />

chrome浏览器插件安装

有时候，你需要在你的页面上点击某个安卓，直接安卓你的chrome浏览器插件，而不是链接到Chrome webstore 的详细地址再安装，那么你可以使用：

html 代码:

1. <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

具体使用，请查看：Using Inline Installation

Google Chrome Mobile (只针对 Android)

从 Chrome 31 开始，你可以设置你的 Web 应用为“app mode”，如 Safari。

html 代码:

1. <!-- 链接到一个 manifest 并定义 manifest 的元数据。-->
2. <!-- manifest.json 中的例子也可以通过以下链接找到。-->
3. <link rel="manifest" href="manifest.json">
4.  
5. <!-- 定义你的网页为 Web 应用 -->
6. <meta name="mobile-web-app-capable" content="yes">
7.  
8. <!-- 第一个是官方推荐格式。-->
9. <link rel="icon" sizes="192x192" href="nice-highres.png">
10. <link rel="icon" sizes="128x128" href="niceicon.png">
11. <!-- 所有带 apple 前缀的格式已废弃，所以不要使用它们。-->
12. <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
13. <link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

Internet Explorer浏览器

模式设置

js 代码: 来源：www.cuplayer.com

1. //IE8以下以IE7标准模式呈现网页，而IE9则以IE9的标准模式呈现网页：
2. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
3. //如果安装了GCF，则使用GCF来渲染页面（"chrome=1"），
4. //如果没有安装GCF，则使用最高版本的IE内核进行渲染（"IE=edge"）
5. <meta http-equiv="x-ua-compatible" content="ie=edge">

GCF（Google Chrome Frame ）相关链接：https://www.chromium.org/developers/how-tos/chrome-frame-getting-started

X-UA-Compatible相关链接：https://blogs.msdn.microsoft.com/ie/2010/06/16/ies-compatibility-features-for-site-developers/

win8,win10下的一些设置

html 代码:

1. <meta http-equiv="cleartype" content="on">
2. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
3.  
4. <!--
5. Disable link highlighting on IE 10 on Windows Phone
6. 具体说明查看：https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/-->
7. <meta name="msapplication-tap-highlight" content="no">
8.  
9. <!--
10. Pinned sites
11. 具体说明查看：https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx-->
12. <meta name="application-name" content="Contoso Pinned Site Caption">
13. <meta name="msapplication-tooltip" content="Example Tooltip Text">
14. <meta name="msapplication-starturl" content="/">
15.  
16. <meta name="msapplication-config" content="http://example.com/browserconfig.xml">
17.  
18. <meta name="msapplication-allowDomainApiCalls" content="true">
19. <meta name="msapplication-allowDomainMetaTags" content="true">
20. <meta name="msapplication-badge" content="frequency=30; polling-uri=http://example.com/id45453245/polling.xml">
21. <meta name="msapplication-navbutton-color" content="#FF3300">
22. <meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile">
23. <meta name="msapplication-square150x150logo" content="path/to/logo.png">
24. <meta name="msapplication-square310x310logo" content="path/to/largelogo.png">
25. <meta name="msapplication-square70x70logo" content="path/to/tinylogo.png">
26. <meta name="msapplication-wide310x150logo" content="path/to/widelogo.png">
27. <meta name="msapplication-task" content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico">
28. <meta name="msapplication-task-separator" content="1">
29. //Windows 8 磁贴颜色
30. <meta name="msapplication-TileColor" content="#FF3300">
31. //Windows 8 磁贴图标
32. <meta name="msapplication-TileImage" content="path/to/tileimage.jpg">
33. <meta name="msapplication-window" content="width=1024;height=768">