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

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 代码:

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 代码:

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