摘要：对于，浏览器全屏状态下，其的值为。的大小可以通过和，实际使用中可能会有一些兼容问题，这跟声明有关。是为了能将电脑上的网页正确的显示到手机上。调整的大小，让其在的查看下有最佳效果，就是我们想要的移动端适配。
上一篇博文，可算把像素这个东西讲清楚了。在这篇博文里面，将继续介绍viewport相关的内容。
很多博客都会提到PPK所讲的三个viewport，有的讲的比较复杂，看的云里雾里，我这里也大概介绍一下，三个viewport主要是相对于移动端而言的。
visual viewport这个是浏览器给我们用的、能真正用来显示网页内容的区域，可以通过下面的js命令获取：
window.innerWidth window.innerHeight
正如上篇博客所说的，前端里面能获取到的像素基本上都是CSS像素，所以这个的单位也是CSS像素。对于iPhone X，浏览器全屏状态下，其window.innerWidth的值为375。
上篇博客中还提到screen.width和screen.height，主要是用来获取整个屏幕的大小的，而window.innerWidth和window.innerHeight只是获取浏览器可用显示区域的大小，也就是浏览器中间负责显示的部分。当浏览器全屏时，要去掉状态栏、标签栏、任务栏等区域，当浏览器非全屏时，其值更小。由于在移动端，浏览器一般都是全屏的，所以大多数情况下screen.width与window.innerWidth的值相等，也有的博客中说用screen.width和screen.height来获取visual viewport的大小，就是这个原因。
visual viewport是我们可以直观看到的，不严谨的说，就是差不多等于手机屏幕的大小，偏向于一个物理概念。
layout viewport网页最早是出现在电脑上的，上一篇博客中提到，电脑的物理像素可能比手机还要低，但是电脑的设备无关像素（或者说是分辨率吧，更严谨一些）是明显大于手机的设备无关像素的，毕竟电脑的屏幕尺寸远比手机大啊。那些在电脑上的网页，如果没有经过专门的优化，直接搬到手机上看，那么问题就来了，网页会被挤得变形，相信这种问题大家都遇到过。所以呢，手机厂商为了解决这个问题，设置了一个layout viewport。
这是一个虚拟的窗口，其大小比手机屏幕大，加载网页时，直接把HTML渲染在这个虚拟的窗口中，这样就不会样式错乱了。在查看的时候，毕竟手机的visual viewport小啊，那就只能通过滚动条来看了。
做个比喻，layout viewport就是一张大白纸，HTML的内容就写在这个大白纸上，visual viewport就是一个放大镜，上下左右移动，可以显示其中的一部分。
Layout viewport的大小可以通过document.documentElement.clientWidth和document.document.clientHeight，实际使用中可能会有一些兼容问题，这跟DOCTYPE声明有关。不同浏览器的layout viewport大小不同，常见的有980px、1024px。
ideal viewportLayout viewport是为了能将电脑上的网页正确的显示到手机上。当浏览器拿到一个网页时，首先会渲染到这个layout viewport里面。可是现在有很多网页会针对手机做专门的设计，比如现在的一些H5活动页，设计的尺寸就是在手机上看的。此时如果还是把网页渲染到这个大的layout viewport上，实在是有点不合适了。所以，还应该有个ideal viewport，这个ideal viewport应该与手机屏幕大小的相同，确切来说，等于visual viewport的大小。把页面渲染到这个ideal viewport里面，就能在visual viewport中完美显示。
小结根据我的理解小结一下：
首先，我们可以假想，layout viewport和ideal viewport都是用来渲染页面的两个盒子，HTML页面渲染在盒子里面，而visual viewport用来查看渲染后的结果的，相当于一个窗口。我们设置HTML的body为width:100%，那么盒子有多宽，HTML页面就有多宽。layout viewport用来渲染电脑上的页面，所以比较大，而ideal viewport较小，用来渲染专门针对手机设计的页面。
然而，在浏览器的实现中，其实并没有那么多盒子。就只有一个layout viewport的盒子，页面就渲染在这个盒子中。layout viewport默认是比较大的。如果我们希望渲染到ideal viewport的盒子里面，那就只要调整这个layout viewport的大小即可，具体如何调整，将在下一节中介绍。
综上，layout viewport用来承载HTML的渲染，visual viewport是查看渲染结果的窗口，而ideal viewport可以理解成是一种尺寸，其大小等于visual viewport。调整layout viewport的大小，让其在visual viewport的查看下有最佳效果，就是我们想要的移动端适配。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53486.html
摘要：对于，浏览器全屏状态下，其的值为。的大小可以通过和，实际使用中可能会有一些兼容问题，这跟声明有关。是为了能将电脑上的网页正确的显示到手机上。调整的大小，让其在的查看下有最佳效果，就是我们想要的移动端适配。 上一篇博文，可算把像素这个东西讲清楚了。在这篇博文里面，将继续介绍viewport相关的内容。 很多博客都会提到PPK所讲的三个viewport，有的讲的比较复杂，看的云里雾里，我这...
摘要：现在开始，用标签来设置。回到应用场景，我们用这个标签的主要目的是做移动端的适配，一般都是做一个专门为移动端设计的页面。利用这个，就是用来设置的宽度。小结用的目的，是为了设置的大小，从而保证能在移动端设备上合适的显示出来。 前两篇博客，把像素和viewport的概念讲清楚了。现在开始，用meta标签来设置viewport。 meta标签 meta标签里面的内容，主要是提供关于这个HTML...
摘要：当你进行页面放大的时候，原本在未缩放的页面上看起来很小的尺寸，现在通过看上去变大了，事实上这部分的的值并没有变化，仅仅是因为进行放大后，的的值所占的屏幕分辨率的值变大了。同理的的值并没有发生变化但是值所占的屏幕分辨率的值变小了。 前言 通过上一篇我们已经大概明白viewport是什么，但是viewport并没有那么简单，一包研究得身心疲惫，脑子一个不够用哈哈，让我们一起看看吧！ 三个v...
摘要：移动客户端的开发类型原生，也就是完全使用移动设备系统语言写的客户端，就是纯，安卓就是纯就是用户看到的界面体验到的交互都是原生的。 前端是个很大的概念，我的理解是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面；现在最常见的说法一般是指Web前端，也就是针对于网页端开发的工作。 Web App就是以浏览器作为客户端...
摘要：移动客户端的开发类型原生，也就是完全使用移动设备系统语言写的客户端，就是纯，安卓就是纯就是用户看到的界面体验到的交互都是原生的。 前端是个很大的概念，我的理解是用户能够看到，直接接触到的层面都算是前端，比如IOS客户端界面，安卓客户端界面，网页界面，甚至PC/MAC 桌面端软件界面；现在最常见的说法一般是指Web前端，也就是针对于网页端开发的工作。 Web App就是以浏览器作为客户端...
阅读 1584·2023-04-25 18:19
阅读 2047·2021-10-26 09:48
阅读 1022·2021-10-09 09:44
阅读 1692·2021-09-09 11:35
阅读 2986·2019-08-30 15:54
阅读 1975·2019-08-30 11:26
阅读 2260·2019-08-29 17:06
阅读 858·2019-08-29 16:38
