viewport

web前端领域,像素分为设别像素和css像素,

一个css像素的大小是可以改变的,比如用户缩放页面的时候,实际上是在缩小或者放大css像素,而设备像素无论大小还是数量都是不变的。

一个块元素默认的宽度是其父元素的100%,是基于起父元素的,所以25%指的是父元素宽度的25%,所以,body元素的默认宽度是html元素宽度的100%

但是html元素的宽度又是基于谁的呢?这个时候就要引入一个概念,初始包含块和视口。

记住一句话: 视口是html元素的父元素,所以我们称视口为初始包含块。所以html元素的百分比是基于视口的。

第一个视口:布局视口。

首先: 需要了解一个事实: 浏览器厂商是希望满足用户的要求的,即在手机也能浏览为PC端设计的网站,所以浏览器厂商必须想办法来在满足~

在pc浏览器中,视口只有一个,并且视口的宽度 = 浏览器窗口的宽度。

但是在移动端也要根据这个来设计的话(移动端浏览器窗口宽度就是屏幕宽度),那么PC端设计的网站在移动端看起来会很丑,因为PC端的网页宽度在800 ~ 1024个CSS像素,而手机屏幕要窄的多,这个时候再PC端25%的宽度在移动端看起来会很窄。所以,布局视口的概念产生了

布局视口: 移动端css布局的依据视口,css布局会根据布局视口来进行计算。

也就是说在移动端,视口和浏览器窗口不再关联,实际上布局视口的宽度要比浏览器窗口大的多(在手机和平板中浏览器布局视口的宽度在768~1024像素之间)

获取布局视口的宽度和高度;

document.documentElement.clientWidth
document.documentElement.clientHeight

视觉视口: 更好理解一些,就是用户正在看到网站的区域

理想视口: 理想视口,这是我们最需要关注的视口,现在我们来回顾一下我们知道了哪些视口,有两个,分别是:布局视口,视觉视口。

布局视口的宽度一般在 680~1024像素之间,这样可以使得PC网站在手机中不被压扁,但是这并不理想,因为手机更适合窄的网站,换句话说,布局视口并不是最理想的宽度,所以,就引入了理想视口。

理想视口,定义了理想视口的宽度,比如对于iphone5来讲,理想视口是320*568。但是最终作用的还是布局视口,因为我们的css是依据布局视口计算的,所以你可以这样理解理想视口:理想的布局视口。下面这段代码可以告诉手机浏览器要把布局视口设为理想视口:

上面那段代码告诉浏览器:将布局视口的宽度设为理想视口。所以,上面代码中的width指的是布局视口的宽 device-width 实际上就是理想视口的宽度。

题外话: meta视口是苹果公司Apple创造的,别的移动端浏览器都直接复制了它。

像素是网页布局的基础,最开始web开发者基本靠直觉使用它。

一个像素就是计算机屏幕显示一种特定颜色的最小区域;设备宽度相同,像素越高,画面就更细致更清晰

css像素,为web开发者创造的,在css和js中使用的抽象层

当你给一个元素设置200px时,那么它到底会跨越多少个设备像素呢,这个取决于屏幕特性和缩放;比如2倍视网膜屏就是跨越了400像素,如果用户放大,那么跨越的设备像素就越多;每一个css和js测试返回的元素宽度仍然为200px;开发者就不用关心这个元素到底跨越了多少个设备像素,而是把复杂的计算交给了浏览器,这就是为什么说CSS像素是专门为Web开发者创造的一个抽象层

在桌面浏览器中,视口的宽度等于浏览器窗口的宽度。

视觉视口与设备的屏幕一样宽,并且它的css像素数会随着用户缩放而改变。

布局视口的默认宽度并不是一个理想的宽度,大家从上面的图就可以看出来了,所以苹果公司就引进了理想窗口这个概念:

它是对设备来说最理想的布局视口尺寸。显示在理想视口中的页面拥有最理想的浏览和阅读的宽度,用户刚进入页面时不再需要缩放。

上面这行代码就是告诉浏览器,布局视口的宽度应该与理想视口的宽度一致。

我们平时在chrome控制台里看到的尺寸就是理想尺寸

注意: 理想尺寸是由浏览器厂商决定的,同一个设备可以有不同的尺寸。

不同设备的相同浏览器理想窗口也会不同,比如手机和平板

而且会随着设备转向改变。

虽然有那么多不同尺寸的理想视口,但是平时开发我们只要告诉浏览器使用它的理想视口(也就是上面那行代码),就没问题了。

总结: 桌面中浏览器窗口就是约束你的css布局窗口,它也决定用户可以看到什么

在手机上,桌面窗口被拆分成了两个:布局视口会限制你的CSS布局;视觉视口决定用户能看到什么

移动端浏览器还有一个理想视口,它是对于特定设备上的特定浏览器的布局视口的一个理想尺寸

可以把布局视口的尺寸设置为理想视口。实际上,这就是响应式设计的基础。

缩放: 手机上放大/缩小 视觉视口,布局视口不会改变,所以我们看到的css布局是不变的

桌面上放大/缩小 视觉视口,由于桌面上的布局视口和视觉视口是同一个,所以布局视口也会改变,这就是我们在桌面端缩放样式有时候会错乱的原因。

(据说移动端css布局不改变也是因为移动端进行重新布局的成本太高)

分辨率: 它有2个概念,一个是设备的分辨率,一个是css/js里的分辨率,这2个东西不是并不是一回事

物理分辨率:DPI:像素数量/宽度(以英寸为单位)得到设备每英寸的点数
无论如何js都无法获取设备的物理分辨率, screen.width并不可靠

设备像素比

设备像素比:Device Pixel Ratio(简称DPR),是设备像素和理想视口的比值。
比如,iphone早起设备像素是320,理想视口宽度也是320,所以DPR就是1。后来的视网膜屏,iphone设备像素变成了640,理想窗口不变320,所以DPR也就变成了2。

  • js通过window.devicePixelRatio, css通过device-pixel-ratio(基于webkit)来获取。
  • DPR也是浏览器厂商决定的,所以也有很多种,并不一定都为整数