前端 viewport 学习笔记

本文是在阅读关于 viewport 的两篇文章后,对于这些常常忘记和混淆的的知识有了一定的理解,为了方便以后查询和使用,以此文记录。如果你在看完此文后还是一知半解,可以至 http://weizhifeng.net/viewports.html 查看原文。

1 设备像素和 css 像素

设备像素:对于pc来说,设备像素就是屏幕的分辨率,比如1366*768,就是将屏幕横向分为1366个像素,纵向分为768个像素。一般来说,这个参数是固定不变的,但是你可以通过pc的显示设置去调节它,但没有人会去把分辨率调整到让自己不舒适的状态。这个属性可以通过JavaScript的属性得到。css像素:当你对某个 div 块设置并设置背景颜色时,在浏览器中这个颜色的区域宽度就是 100px 的 css 像素。css 像素的大小可以通过浏览器的缩放进行调节的。假设你的浏览器页面缩放为100%,此时一个 css 像素就对应1个设备像素;如果你将页面放大至200%,那么一个css像素就对应4个设备像素,因为宽和高都被拉伸了1倍。通过几张图片应该能够更好的理解它。这是100%缩放时,css 像素和设备像素完全重合缩小页面比例,css 像素变小,一个设备像素覆盖了多个 css 像素:放大页面比例,css 像素变大,一个 css 像素覆盖多个设备像素:

2 属性

2.1 screen.width、screen.height屏幕的分辨率,一般是不变的,度量单位为设备像素。

2.2 window.innerWidth、window.innerHeight浏览器的内部尺寸,包括了滚动条,度量单位为 css 像素。调整浏览器大小会改变值,改变页面的缩放比例也会改变值,因为它是用 css 度量的。

2.3 window.pageXOffset、window.pageYOffset页面横向滚动距离和纵向滚动距离,可以理解为当前视口顶部页面顶部的距离,度量单位为css像素。当页面上下或者左右滚动时,相应的值会发生变化。

2.4 document.documentElement.clientWidth / Heightviewport 尺寸,用 css 像素度量,不包括滚动条。即页面目前的可视窗口,调整浏览器大小和进行页面缩放会改变它的大小

2.5 document.documentElement.offsetWidth / Height元素的尺寸,用 css 像素度量。是整个页面的大小,如果你对 html 元素设置了固定的 width 和 height,那么调整浏览器大小和进行页面的缩放不会改变它的大小。

3 viewport

首先要明确一点关系,屏幕显示器包含了浏览器,浏览器包含了 viewport,viewport 中包含了元素,并且:

指向 viewport 的大小

指向 html 元素的大小

虽然 viewport 包含了html元素,实际上 html 元素是可以比 viewport 大的(你需要手动设置这个值)。通常开发者都不会去设定 html 元素的大小,那么此时 html 元素的大小时就是 viewport 的大小,你可以打开控制台,输入下面这条语句,结果一定是返回 true。

console.log(document.documentElement.clientWidth===document.documentElement.offsetWidth)

现在你可以打开编辑器,设置 html 的宽度为1000px或者其他,只要不等于 viewport 的宽度就行,再在控制台输入这条语句,结果一定是返回false。

4 事件中的坐标

3.1 pageX、pageY表示相对于元素的以 css 像素度量的事件坐标。3.2 clientX、clientY表示相对于viewport的以 css 像素度量的事件坐标。3.3 screenX、screenY表示相对于屏幕的以设备像素度量的事件坐标,一般是不会用到的。

5 媒体查询

在媒体查询中,width 和 height 查询的是 viewport 的宽高,以 css 像素度量

和` 查询的是屏幕的宽高,是以设备像素作为度量的,这个参数一般是不变的,因此这个参数对于响应式的开发者来说是没有用处的。

6 移动浏览器的viewport

在移动web的开发中,常常可以看到这个标签,要了解这个各个参数的含义,首先要明白两个移动浏览器中的两个viewport,layout viewportvisual viewport6.1 layout viewport这是 stack overflow上的 George Cummins 解释:把 layout viewport 想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架,你通过它来看这张大图。(译者:可以理解为「管中窥豹」)这个小框架的周围被不透明的材料所环绕,这掩盖了你所有的视线,只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架(缩小)来看整个图片的时候,你可以不用管大图,或者你可以靠近一些(放大)只看局部。你也可以改变框架的方向,但是大图(layout viewport)的大小和形状永远不会变。6.2 visual viewport手机屏幕的大小就是 visual viewport,即手机屏幕能显示的大小。看看Chris给出的解释:visual viewport是页面当前显示在屏幕上的部分。用户可以通过滚动来改变他所看到的页面的部分,或者通过缩放来改变visual viewport的大小。本人的理解是:想象你在高空中俯瞰大地,投入你视野的便是visual viewport,可以通过调整你的高度来调整你的visual viewport大小,高度越低,看到的范围越小(放大),高度越高,看到的范围越大(缩小);而整个大地,即layout viewport的大小和形状是不会变的。  假设用css单位来衡量的话,那么layout viewport大小不变,即它的css像素大小不变,在手机屏幕上可以通过缩放来调节visual viewport的大小,当放大时,单位css像素所占的屏幕像素变大,因此整个屏幕的所占有的css像素变少,于是visual viewport变小;同理,当缩小时,visual viewport会变大。两个viewport的关系:通常来说,pc的显示器都远远大于手机,因此能显示的内容更多,可以认为在桌面浏览器中的html元素的大小即是整个layout viewport的大小。而在移动设备上,如果不对页面进行缩小,那么屏幕上只能看到layout viewport的一部分,就像这样

想要看到更多的layout viewport,那么就只能进行缩小。当layout viewport完全缩小在手机屏幕中时,此时两个viewport的大小时相等的。

6.3 度量layout viewport同桌面浏览器一样,可以用,这个属性指向了layout viewport的尺寸6.4 度量visual viewport可以用来度量visual viewport的尺寸,当用户缩小或者放大的时候,度量的尺寸会发生变化,因为屏幕上的CSS像素会增加或者减少。这和上面关于css的关于visual viewport的假设一致。6.5 媒体查询width和height使用layout viewport作为参照物,device-width和device-height仍然以设备像素作为参照,换句话说,width和height以为参照device-width和device-height以为参照6.6 meta标签

现在可以对meta标签来进行解释了

width=device-width:表示layout viewport大小为设备像素大小

initial-scale=1.0:表示初始缩放为1

minimum-scale=1.0:表示最小缩放为1

maximum-scale=1.0:表示最大缩放为1

user-scalable=no:表示不允许用户缩放

对于不同的手机浏览器,其规定的 layout viewport 大小不一,Safari iPhone 为980px,Opera为850px,Android WebKit 为 800px,最后 IE 为 974px。可以通过来重置其大小。假设你在一台iPad设备(设备像素为768*1024)上运行如下标签:

那么其layout viewport即为768,就算缩放也不会改变大小;而其visual viewport :则会随着缩放而改变大小。因此,当设置layout viewport为设备像素大小且禁止缩放时,就能使两个 viewport 的大小相等,从而使设置了媒体查询样式的页面适应手机屏幕。本文由零熊技术团队前端开发 Nate 同学投稿。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180911G0FQ1100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券