上海Web前端培训班价格

视口(Viewport)是移动Web开发中一个非常重要的概念，最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果公司引入视口的概念后，大多数的移动开发者也都认同了这个做法。

视口简单来说就是浏览器显示页面内容的屏幕区域。在移动端浏览器中，存在着3种视口，分别是布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)。下面分别进行讲解。

1. 布局视口

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。下面通过图1演示什么是布局视口。

图1 布局视口

在图1中，当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，不能像PC端浏览器那样完美地展示网页，这正是布局视口存在的问题。这样的网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。

2. 视觉视口

视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，下面通过图2演示什么是视觉视口。

图2 视觉视口

需要注意的是，当我们在手机中缩放网页的时候，操作的是视觉视口，而布局视口仍然保持原来的宽度。

3. 理想视口

理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。下面通过图3演示什么是理想视口。

图3 理想视口

从图3可以看出，在理想视口情况下，布局视口的大小和屏幕宽度是一致的，这样就不需要左右滚动页面了。

在开发中，为了实现理想视口，需要给移动端页面添加标签配置视口，通知浏览器来进行处理。

猜你喜欢：

HTML5中figure标签的作用

什么是自适应式页面?

js数组遍历：JavaScript如何遍历数组?

新浪网、新浪教育频道主办的“2017中国教育盛典——教育之变” 于2017年11月28日在北京隆重举行，参会人员包括教育界知名专家学者、政府相关领导、校方代表、顶级教育投资人、教育机构负责人、教育创业精英、教育公益人士代表等，千锋因其在IT培训行业的影响力以及为IT培训行业做出的重要贡献，应邀参加了此次盛典，并荣获“2017中国口碑影响力职业培训机构”称号。千锋总部位于北京，现已在全国十四个城市成立分公司，多年来始终致力于打造IT教育全产业链人才服务平台，年培养中高端IT人才20000余人，坚持以人才需求为导向，为学员提供教学、就业一体化服务，是学员信赖的IT教育品牌，千锋专注于IT职业教育领域，现有HTML5培训、UI交互设计培训、PHP培训、Java+云数据培训、大数据开发培训、VR/AR/Unity游戏开发培训、Python人工智能培训、Linux云计算培训、全栈软件测试培训、Android培训、iOS培训，11大学科。