chaihongjun.me

2016年最新前端必知的移动互联网HTML5Head头标签-safarichrome

2016年最新前端必知的移动互联网HTML5Head头标签-safarichrome

Apple Safari 浏览器

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

<!-- Pinned Site -->
<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浏览器下翻译插件很烦人,可以通过下面的代码禁用它。

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


chrome浏览器插件安装

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

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

<!-- 链接到一个 manifest 并定义 manifest 的元数据。-->
<!-- manifest.json 中的例子也可以通过以下链接找到。-->
<link rel="manifest" href="manifest.json">

<!-- 定义你的网页为 Web 应用 -->
<meta name="mobile-web-app-capable" content="yes">

<!-- 第一个是官方推荐格式。-->
<link rel="icon" sizes="192x192" href="nice-highres.png">
<link rel="icon" sizes="128x128" href="niceicon.png">
<!-- 所有带 apple 前缀的格式已废弃,所以不要使用它们。-->
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:愚人码头»