layout viewport visual viewport ideal viewport

我们经常见到用 K和 P这个单位来形容屏幕：
P代表的就是屏幕纵向的像素个数， 1080P即纵向有 1080个像素，分辨率为 1920X1080的屏幕就属于 1080P屏幕。
我们平时所说的高清屏其实就是屏幕的物理分辨率达到或超过 1920X1080的屏幕。
K代表屏幕横向有几个 1024个像素，一般来讲横向像素超过 2048就属于 2K屏，横向像素超过 4096就属于 4K屏。
四、视口
视口( viewport)代表当前可见的计算机图形区域。在 Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等——即指你正在浏览的文档的那一部分。
一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口，它们在屏幕适配中起着非常重要的作用。
4.1 布局视口

布局视口( layout viewport)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当这个元素是最顶级的元素时，它就是基于布局视口来计算的。
所以，布局视口是网页布局的基准窗口，在 PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包括 borders 、 margins、滚动条）。
在移动端，布局视口被赋予一个默认值，大部分为 980px，这保证 PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。
我们可以通过调用 document.documentElement.clientWidth/clientHeight来获取布局视口大小。
4.2 视觉视口

视觉视口( visual viewport)：用户通过屏幕真实看到的区域。
视觉视口默认等于当前浏览器的窗口大小（包括滚动条宽度）。
当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。
例如：用户将浏览器窗口放大了 200%，这时浏览器窗口中的 CSS像素会随着视觉视口的放大而放大，这时一个 CSS像素会跨越更多的物理像素。
所以，布局视口会限制你的 CSS布局而视觉视口决定用户具体能看到什么。
我们可以通过调用 window.innerWidth/innerHeight来获取视觉视口大小。
4.3 理想视口

布局视口在移动端展示的效果并不是一个理想的效果，所以理想视口( ideal viewport)就诞生了：网站页面在移动端展示的理想大小。
如上图，我们在描述设备独立像素时曾使用过这张图，在浏览器调试移动端时页面上给定的像素大小就是理想视口大小，它的单位正是设备独立像素。
上面在介绍 CSS像素时曾经提到页面的缩放系数=CSS像素/设备独立像素，实际上说页面的缩放系数=理想视口宽度/视觉视口宽度更为准确。
所以，当页面缩放比例为 100%时， CSS像素=设备独立像素，理想视口=视觉视口。
我们可以通过调用 screen.width/height来获取理想视口大小。

width=device-width 也就是说将layout viewport 的宽设置ideal viewport 的宽度

layout viewport visual viewport ideal viewport相关推荐

移动端适配之二：visual viewport、layout viewport和ideal viewport介绍
上一篇博文,可算把像素这个东西讲清楚了.在这篇博文里面,将继续介绍viewport相关的内容. 很多博客都会提到PPK所讲的三个viewport,有的讲的比较复杂,看的云里雾里,我这里也大概介绍一下, ...
移动端适配之二：visual viewport、layout viewport和ideal viewport介绍 1
上一篇博文,可算把像素这个东西讲清楚了.在这篇博文里面,将继续介绍viewport相关的内容. 很多博客都会提到PPK所讲的三个viewport,有的讲的比较复杂,看的云里雾里,我这里也大概介绍一下, ...
layout viewport、visual viewport 和 ideal viewport 的区别？
相关知识点: 如果把移动设备上浏览器的可视区域设为viewport的话,某些网站就会因为viewport太窄而显示错乱,所以这些浏览器就决定默认情况下把viewport设为一个较宽的值,比如980p ...
作为前端的你不能不知道的知识，总结物理像素，像素密度，分辨率，CSS像素，设备像素比，二倍图，layout viewport、visual viewport 、ideal viewport、meta。
此篇文章总结物理像素,像素密度,分辨率,CSS像素,设备像素比,二倍图,layout viewport.visual viewport .ideal viewport.meta. 首先我们来谈谈最基础 ...
什么是viewport，为什么需要viewport
viewport:视口,视觉窗口,显示区域. 在显示面积上手机屏幕相对桌面显示器要小很多,在几年前(现在也如此)大部分网站都是为桌面显示器浏览而设计,很少考虑到适应手机屏幕,所以如果用手机浏览大多网站 ...
CSS布局基础之二认识Viewport
什么是viewport viewport,等同于浏览器窗口. 功能:约束你网站中最顶级包含块(containing block)元素html标签. 什么是包含块(containing block)?下 ...
移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
深入理解移动前端开发之viewport
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
viewport理解
以下内容对viewport理解不够深入,重写了一篇文章介绍基于REM响应式适配问题: 地址: 基于REM响应式适配方案 viewport预备知识 dpr === dppx dpr:device pix ...

layout viewport visual viewport ideal viewport

layout viewport visual viewport ideal viewport相关推荐

最新文章

热门文章