下载掌阅APP，畅读海量书库
立即打开
手机的屏幕尺寸多种多样，不同手机屏幕的分辨率、宽高比例都有可能不同。同一张图片在不同手机上的显示效果会存在差异。因此，需要对不同的手机屏幕进行适配，使相同的程序逻辑在不同的屏幕上的显示效果一致。在移动Web开发中有视口的概念，通过视口可以理解移动端浏览器的显示机制。下面将对视口进行详细讲解。
视口（Viewport）是移动Web开发中一个非常重要的概念，最早是由苹果公司为iOS系统的Safari浏览器引入的，其目的是让iPhone的小屏幕尽可能完整地显示整个网页。通过设置视口，不管网页原始的分辨率有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果公司引入视口的概念后，大多数的移动开发者也认同了这个做法。
简单来说，视口就是浏览器显示页面内容的屏幕区域。在移动端浏览器中，存在着3种视口，分别是布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport），下面分别进行讲解。
布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。下面通过图2-1演示布局视口。
图2-1 布局视口
在图2-1中，当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，不能像PC端浏览器那样完美地展示网页，这是布局视口比设备屏幕宽造成的。这样的网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。
视觉视口是指用户所看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。下面通过图2-2演示视觉视口。
图2-2 视觉视口
需要注意的是，当在手机上缩放网页时，操作的是视觉视口，而布局视口仍然保持原来的宽度。
理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。下面通过图2-3演示理想视口。
图2-3 理想视口
从图2-3可以看出，在理想视口情况下，布局视口的宽度和屏幕宽度是一致的，这样就不需要左右滑动页面了。
在开发中，为了实现理想视口，需要为移动端页面添加<meta>标签来配置视口，通知浏览器来进行处理。关于如何使用<meta>标签配置视口会在后面详细讲解。
为了方便对不同屏幕尺寸的设备进行适配，PC端的Chrome浏览器在开发者工具中加入了模拟移动端屏幕的功能，可以模拟各种手机的显示效果。利用Chrome浏览器模拟手机屏幕，来观察移动端屏幕的显示效果，可以帮助我们更好地理解视口。
下面通过案例演示如何利用Chrome浏览器模拟手机屏幕，具体如例2-1所示。
【例2-1】
（1）创建C:\web\chapter02\demo01.html文件，具体代码如下。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 .title {
8 font-size: 20px;
9 color: red;
10 }
11 </style>
12 </head>
13 <body>
14 <div class="title">新款Android手机</div>
15 <img src="picture1.jpg" alt="">
16 </body>
17 </html>
在上述代码中，第7~10行代码使用类选择器.title获取元素，将字体大小设为20px，字体颜色设为红色；第14~15行代码分别定义<div>标签和<img>标签。其中，<img>标签引入的图片素材picture1.jpg文件，读者可以从本书配套源代码中获取。
（2）通过浏览器打开demo01.html，页面显示效果如图2-4所示。
图2-4 PC端页面显示效果
（3）在浏览器显示的页面中，单击鼠标右键，然后在弹出菜单中选择“检查”命令启动开发者工具（也可以直接按“F12”快捷键），运行结果如图2-5所示。
图2-5 启动开发者工具
在图2-5中，页面的右侧是开发者工具面板，当前位于“Elements”（元素）选项卡下，在该选项卡内可以查看网页的源代码。
（4）单击开发者工具面板左上角的第2个按钮，进入到移动端设备调试界面。进入后，会看到页面整体缩小了，并且在页面的顶部出现了设备的名称（如iPhone 6/7/8），如图2-6所示。
图2-6 查看移动端设备显示效果
在图2-6中，开发者工具模拟了当前网页在手机屏幕上显示的效果。从图2-6中可以看出，一个普通的网页在手机浏览器中显示时，显示的内容会变得非常小。
（5）将鼠标指针放在“Elements”选项卡中的<html>标签上，会看到浏览器显示了当前页面的宽度为980px，如图2-7所示。
图2-7 查看页面宽度
通过上述案例可知，在iPhone 6/7/8设备中，布局视口的宽度为980px。由于手机的屏幕比较小，为了将网页显示完整（不出现左右滚动条），对网页整体进行了缩小，所以网页中的内容就变小了。而如果用户放大了网页，则布局视口的宽度仍然保持不变，浏览器中会出现横向滚动条，用户需要左右滑动网页查看内容。
在传统的PC端网页开发中，并没有使用过<meta>标签来设置视口，此时浏览器会按照默认的布局视口宽度来显示网页。如果希望自己开发的网页在浏览器中以理想视口的形式呈现，就需要利用<meta>标签设置视口。
在<meta>标签中，将name属性设为viewport，即可设置视口，示例代码如下。
<meta name="viewport" content="width=device-width">
在上述代码中，设置content="width=device-width"表示通知浏览器布局视口的宽度应该与设备的宽度一致，即设备有多宽，布局视口就有多宽。
为了使读者更好地理解，下面通过案例进行演示，具体如例2-2所示。
【例2-2】
（1）打开C:\web\chapter02目录，将之前编写的demo01.html文件复制为demo02.html。然后在demo02.html页面中添加<meta>标签，具体代码如下。
1 <head> 2 <meta charset="UTF-8"> 3 <title>Document</title> 4 <!--添加meta标签--> 5 <meta name="viewport" content="width=device-width"> 6 ……（原有代码） 7 </head>
（2）通过浏览器打开demo02.html，查看页面的宽度，如图2-8所示。
图2-8 查看设置视口后的页面宽度
在图2-8中，页面的宽度为414px，而当前设备的宽度也是414px。由此可见，通过设置视口，可将网页的宽度设置为当前设备的宽度。经过设置后，网页中的内容也变大了。由此就实现了理想视口。
小提示：
理想视口的宽度并不是一个固定值，它在不同设备、不同浏览器上的宽度都有可能不同。浏览器的理想视口的大小取决于它所处的设备。
在使用<meta>标签设置视口时，可以在content属性中添加一些参数，其格式为“参数名=参数值”，多个参数用“，”分开。以前面演示过的“width=device-width”为例，width就是参数名，device-width是参数值。
content属性中的一些常用参数如表2-1所示。
表2-1 视口的常用参数
在表2-1中，device-width表示设备宽度，device-height表示设备高度。
为了使读者更好地理解，下面通过代码进行演示。
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
上述代码将视口设置为不允许用户缩放页面，视口宽度等于设备宽度，初始缩放比为1.0，最大缩放比为1.0。