HTML5手机端 HEAD内容介绍

时间:2017年02月07日 浏览:1001

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的单位和弹性盒模型。

相关文章

相关案例

最新文章

^