HTML5手机端 HEAD内容介绍
时间：2017年02月07日 浏览：976
HTML5在手机端越来越火热了，蓝瞳视觉特意为想入门的同学整理编写了这篇基础介绍，希望有所帮助。
以下内容非常简单，但也需要你有html基础，适合有PC前端经验，刚刚想尝试做手机端页面的同学。
总览为：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <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"> <title></title> </head> <body> </body> </html>
下面我们来逐行解释一下：
1.HTML5文档类型声明
<!DOCTYPE html>
文档类型主要是告诉浏览器这个页面属于哪个版本的Html,以便于让其更好的显示。更多可以参考：学习HTML5-文档类型
2.文档字符编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
这里唯一要提醒的是，此处声明是告知浏览器此文档以utf-8编码渲染，并非只此文档文件身是utf-8的。
3.针对IE(8及以上)浏览器的指令
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容
4.视窗与缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
这里比较重要了，是手机端的重点声明，下面我们详细说明一下。
width ： viewport的宽度
height : viewport的高度
viewport： 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域
initial-scale ： 初始的缩放比例
minimum-scale ： 允许用户缩放到的最小比例
maximum-scale ： 允许用户缩放到的最大比例
user-scalable ： 用户是否可以手动缩放
5.Apple(iOS)设备工具栏菜单栏
<meta name="apple-mobile-web-app-capable" content="yes">
这个apple-mobile-web-app-capable是用于Apple(iOS)设备，如Iphone,Ipad，作用就是删除默认的苹果工具栏和菜单栏。
content有两个值”yes”和”no”如果需要显示工具栏和菜单栏时，这个行可以省掉，因为默认就是显示(yes)。
6.Apple(iOS)设备状态栏
<meta name="apple-mobile-web-app-status-bar-style" content="black">
作用是控制状态栏显示样式，这里需要先增加一个声明：
<meta name="apple-mobile-web-app-capable" content="yes">
(以下截图来自网络，手头没有Iphone，并未做测试)
content="black"时交果：
content="black-translucent"：时交果
7.Apple(iOS)设备，页面上电话，手机号是否可拔打
<meta name="format-detection" content="telephone=no">
在iPhone 手机上默认值是telephone=yes（电话号码显示为拨号的超链接）,可将telephone=no，则手机号码不被显示为拨号链接
以上几条就是手机上HTML5页面的head常用内容，希望对想入门的你有所帮助。下次我们了解一下手机上CSS的单位和弹性盒模型。
上一篇：高档女装企业官网设计
下一篇：新市绿色企业级网站
