热搜:fiddler git ip ios 代理
历史搜索

width=device

游客2024-08-22 09:30:01

设备像素(device pixels)是指与硬件设备直接相关的像素,是真实的屏幕设备中的像素点。比如说,一个电脑显示器的参数中,最佳分辨率是 1920×1080,那么指的就是这个显示器在屏幕上用于显示的实际像素点,也就是设备像素。

另一个概念是 css 像素(css pixels)。css 像素是指网页布局和样式定义所使用的像素,也就是说,css 代码中的 px,对应的就是 css 像素。
那么,css 像素和设备像素有什么区别呢?简单地说,css 像素比设备像素要更“虚拟”一些。下面来解释这一点。

css 像素和设备像素之间是一种可变的转化关系。在 100%缩放比例下,1 个 css 像素等于 1 个设备像素。
在表示某一数目的 css 像素时,在放大状态下使用了更多的设备像素,而在缩小状态下使用了更少的设备像素。这就是 css 像素和设备像素的概念。

视口(viewport),指的是浏览器窗口中用来显示网页的区域。以浏览器来说,就是浏览器的窗口内容区域(除去标题栏,菜单栏,地址栏,状态栏等等浏览器的“周边”的东西)。
视口表现得像是之上的一个块元素,它限制并确定的宽度,但却不属于 html 结构,不能被设置样式。
而且,任何时候,视口的尺寸都会随着浏览器窗口的大小变化而变化。桌面电脑中的视口,就是这样的一个概念。

相比桌面电脑,在手机上浏览网页,最大的差异在于屏幕尺寸。电脑端的页面到手机上,很容易出现水土不服(一些流体布局的网页会在过窄的视口中变得一团乱),
为了让用户在手机上也获得最佳的网页浏览体验,应该让视口更宽,超越屏幕的宽度。所以,在手机浏览器中,视口被划分为了两个:可见视口(visual viewport)和布局视口(layout viewport)。

  • 可见视口是指当前在手机屏幕上显示的部分。当你做缩放的时候,可见视口的尺寸(css 像素值)也会变化。
  • 和可见视口不同,布局视口则是整个页面的窗口,用于元素布局和尺寸计算(比如百分比的宽度值),而且比可见视口明显要更宽。无论你缩放,或者滑动页面,甚至翻转手机屏幕,布局视口始终不变。
    布局视口的宽度是由手机浏览器定义的,随浏览器不同而不同。比如 Safari 是 980px,Android Webkit 是 800px。这都远比屏幕宽度值要大。

手机中的布局视口是可以更改的。你一定在很多移动版网页中见到过下边这个标签元素。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这其中有一句 width=device-width,它的意思是,把手机浏览器的布局视口的宽度,更改为当前设备的宽度,也就是等于可见视口。

  • em,是一个相对单位。相对于当前对象内文本的 font-size,如果当前文本的字体尺寸没有设置,则相对于浏览器的默认字体尺寸。即 1em=16px。
  • rem,是一个相对单位。是相对 HTML 根元素,通过 rem 既可以做到只修改根元素就可以成比例的调整所有字体。
标签:CSS