移动端需要知道的一些head头部标签

本文内容参考了HTML头部标签HTML head头标签两篇非常棒的文章。

在如今的前端开发中,移动端的页面开发已成为开发员不可或缺的一项技能,以前只针对PC端开发的日子一去不复返了。为了跟上时代的步伐,我也已经开始进军移动端,忽然发现移动端也挺好玩的(虽然很多坑,但我还是很乐意的往下跳了)。那么接下来看看开发时所要用到的一些最基本的head头部标签,这些标签在很大程度上决定了我们的网页在不同的终端中的展示情况。

charset——声明字符编码

<meta charset="utf-8">


优先使用 IE 最新版本和 Chrome

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


禁止百度转码

通过百度手机打开网页时,百度可能会对你的网页进行转码,脱下你的衣服,往你的身上贴狗皮膏药的广告,为此可在 head 内添加

<meta http-equiv="Cache-Control" content="no-siteapp" />

相关链接:SiteApp 转码声明


页面关键词 keywords

<meta name="keywords" content="your keywords">


页面描述内容 description

<meta name="description" content="your description">


定义网页作者 author

<meta name="author" content="author,email address">


定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。

<meta name="robots" content="index,follow" /><!-- 搜索引擎抓取 -->


viewport

viewport 可以让布局在移动浏览器上显示的更好。 通常会写:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)

content 参数:

  • width viewport 宽度(数值/device-width)

  • height viewport 高度(数值/device-height)

  • initial-scale 初始缩放比例

  • maximum-scale 最大缩放比例

  • minimum-scale 最小缩放比例

  • user-scalable 是否允许用户缩放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。

<meta name="viewport" content="width=device-width,user-scalable=yes">

相关链接:非响应式设计的viewport


ios设备

添加到主屏后的标题(iOS 6 新增)

<meta name="apple-mobile-web-app-title" content="标题">

是否启用 WebApp 全屏模式

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

设置状态栏的背景颜色

<!-- 设置状态栏的背景颜色,只有在 "apple-mobile-web-app-capable" content="yes" 时生效 -->

只有在 "apple-mobile-web-app-capable" content="yes" 时生效

  • content 参数:

  • default 默认值。

  • black 状态栏背景是黑色。

  • black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

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


ios图标

rel 参数: 

  • apple-touch-icon 图片自动处理成圆角和高光等效果。 

  • apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。 iPhone 和 iTouch,默认 57x57 像素,必须有

<!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->

iPad,72x72 像素,可以没有,但推荐有

<!-- iPad,72x72 像素,可以没有,但推荐有 -->

Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有

<!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->

Retina iPad,144x144 像素,可以没有,但推荐有

<!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->

IOS 图标大小在iPhone 6 plus上是180×180,iPhone 6 是120x120。 适配iPhone 6 plus,则需要在中加上这段

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">


ios启动画面

官方文档:https://developer.apple.com/library/ios/qa/qa1686/_index.html 

参考文章:http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004(标准分辨率)

<!-- iPad 竖屏 768 x 1004(标准分辨率) -->

iPad 竖屏 1536x2008(Retina)

<!-- iPad 竖屏 1536x2008(Retina) -->

iPad 横屏 1024x748(标准分辨率)

<!-- iPad 横屏 1024x748(标准分辨率) -->

iPad 横屏 2048x1496(Retina)

<!-- iPad 横屏 2048x1496(Retina) -->

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->

iPhone/iPod Touch 竖屏 640x960 (Retina)

<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->

添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)

<!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->

iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 。

<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">


Android

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

android.png


window8

Windows 8 磁贴颜色

<!-- Windows 8 磁贴颜色 -->

Windows 8 磁贴图标

<!-- Windows 8 磁贴图标 -->


移动端meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- 删除苹果默认的工具栏和菜单栏 -->

<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /> 
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">