HTML5手机端 HEAD内容介绍
时间:2017年02月07日 浏览:1336
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的单位和弹性盒模型。
上一篇:高档女装企业官网设计
下一篇:新市绿色企业级网站