在上述代码中，divbody的子元素，设置style="width:50%"就表示该div占body

宽度的50%，而body没有显示声明宽度，因此body占用了父包含块(视口)html

元素宽度的。同样，html也没显示声明宽度，因此html元素也占父包含块的。

视口在CSS标准文档中称为初始包含块，这个初始包含块所有CSS百分比宽度推

算的根源。在PC桌面上，如果不对html和body元素设置margin和paing，那

么html和body元素都与浏览器窗口的宽度一致。因此，这时，上述代码中的div

元素占浏览器宽度的50%。但，由于设备的屏幕较小，在设备上，如果视口的宽

度与浏览器窗口的宽度一致，在小的屏幕上呈现过多的内容清晰度较差，例如的案

例页面内容如果在iPhone6设备上呈现，如下图所示。

1

body>*{width:95%;height:auto;margin:0auto;margin-top:10px;border:1pxsol

id#000;paing:5px;}

header{height:50px;}

section{height:300px;}

footer{height:30px;}

section>*{height:;border:1pxsolid#000;float:left;}

aside{width:25.510204%;/*250÷980*/}

article{width:71.428571%;/*700÷980*/margin-left:1.0204088%;}

2

从上图可以看出，网页的内容显示模糊，这时家也许想到了否可以把网页放，通过

网页来看清上面的内容，这就需要让视口的宽度于浏览器窗口的宽度，来达到网页

缩放的目的，将为家详细讲解视口的设置。

端的3种视口

在端浏览器当中，存在着3种视口：可见视口、布局视口(视窗视口)和理想视口。

可见视口与布局视口

可见视口指设备的屏幕宽度(浏览器窗口宽度)，布局视口指网页的宽度，如下图所

示。

3

在上图中，设备屏幕414像素的宽度，在浏览器中，414像素的屏幕宽度能够展

示1200像素宽度的内容。那么414像素就可见视口的宽度，而1200像素就布局

视口的宽度。

一般设备的浏览器都默认设置了一个标签，用来定义虚拟的布局视口，用于解决早

期的页面在上显示的问题。iOS和Android基本都将这个视口分辨率设置为980

像素，iPad和WinPhone设置为1024像素，所以PC端的网页在这些设备上呈现

时，元素看上去很小，一般默认可以通过手动缩放网页。

为了让用户能够看清晰设备中的内容，发者在通常情况下并不使用默认的

viewport来展示，而自定义配置视口的属性，使视口和页面的比例更加适当。

HTML5中，viewport元标签指标签，标签中用于设置视口的常用属性如下表所示。

属性

width

height

initial-scale

minimum-

scale

maximum-

scale

user-scalable

取值

正整数或device-

width

正整数或device-

height

[0.0-10.0]

[0.0-10.0]

[0.0-10.0]

yes/no

描述

定义视口的宽度，单位为像素

定义视口的高度，单位为像素，一般不用

定义初始缩放值

定义缩小最小比例，它必须小于或等干

maximum-scale设置

定义放比例，它必须于或等于minimum-scale

设置

定义否允许用户手动缩放页面，默认值yes

使用标签配置视口属性的如下：

l-scale=1.0,maximum-scale=1.0">

4