HTML 适配pc端和移动端打开的 html 页面基本构成

在实际运用中,经常会要求页面能在 pc 端打开,也能在移动端打开,甚至还能嵌入 app 中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>盘古歌教程</title>
	</head>
	<body>
		<p>我的第一个段落。</p>
	</body>
</html>

实例解析

1.以下,表示声明为 HTML5 文档。这是用来告知 Web 浏览器页面使用了哪种 HTML 版本。目前大部分网站都是用 HTML5,如百度、新浪、微博。

<!DOCTYPE html>

2.以下,charset="UTF-8" 是设置编码方式,中文网站需要设置编码方式,不然页面容易乱码。

<meta charset="utf-8"/>

3.以下,用移动端打开页面时 :

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width=device-width 页面宽度为移动端宽度。
initial-scale=1.0 页面首次被显示时无缩放。
maximum-scale=1.0 页面最大缩放级别为1,也就是页面不允许放大。
user-scalable=no 页面不允许用户手指缩放。