———— 再次阅读了《viewports剖析》,写一点自己对移动端的总结和想法。
文章里定义了移动端有两个Viewport:
- Layout Viewport:布局视口
- Visual Viewpor:视觉视口
之前一直在这两个知识点上学习,但我认为弄懂移动端,还需要加上一个关键知识点,就是 —— 屏幕大小。下面简单地总结一下。
Layout Viewport (布局视口)
- CSS pixel度量
- 尺寸获得:document.documentElement.clientWdith/Height
在PC端已经知道,网页的viewport是高于html元素的属于页面最高级别的容器。这个尺寸就是页面布局的宽度(高度)。
我们根据视觉稿布局网页的时候,所做的页面就是基于此容器。
----------------在说Visual Viewport之前,先来总结一下屏幕大小。
屏幕大小
- 设备的pixel(DP)度量
- 尺寸获得:screen.width/height
虽然在前端开发中并不关心屏幕大小,因为移动设备太多,分辨率,尺寸,比例也不尽相同。往往会用一套适配进行开发,但有必要了解。
eg. 以iphone6举例:
分辨率(基于DIP):750*1334 (宽*高)
以上尺寸获得的屏幕大小:375*667 ,这就是我们获得的设备屏幕宽度。
屏幕是Retina屏,DPR=2
DPR(device pixel ratio),物理像素与设备像素比例。DPR=2,即 1 个设备像素= 2*2 个物理像素
以上这些关于屏幕数据,开发人员无法改变,手机厂商在手机设计制作的时候已将其定义好。
Visual Viewport(视觉视口)
- CSS pixel度量
- 尺寸获得:window.innerWidth/Height
Visual Viewport虚拟视口可以当做是阅读Layout Viewport的窗口。可以用以上js代码来获得其尺寸,注意,尺寸是会随着用户或代码控制缩放而变化的!
PC端通过这个代码获得浏览器宽度(高度),其值也是会通过缩放而变化,当然在PC端也可以通过用户人为改变浏览器大小。
缩放
之前一直在这个缩放地方做困扰,其实缩放改变的是视觉视口的大小(即视口的宽与高)。而缩放又是基于屏幕大小的。
这么说也难以理解,其实(拿宽度举例)是以 "screen.width除以window.innerWidth" ,如下:
- 当缩放值 = 1 , 1CSS pixel(宽) = 1设备像素(宽)
- 当缩放值 = 2 , 1CSS pixel (宽)= 2设备像素 (宽)
eg,当缩放值为2的时候,在iphone6,设备像素为 375*667 大小的屏幕中,只显示了 188*334 个CSS像素点(VIsual Viewport)。那么在这个屏幕中可以显示的元素变少,给用户的感觉就是“放大”了,用户拿了一个2倍的“放大镜”,去“看”这个Layout Viewport。
最后再次回到这句话上面
<html> ... <meta name="viewport" content="width=device-width initial-scale=1.0"> ... </html>
(一个meta扩展标签,现在已经来做前端的屏幕适配)
width:定义了Layout Viewport的宽度
device-width:设备宽度
initial-scale:设定默认初始值,以多少大小的Visual Viewport去“看”Layout Viewport
还有maximum-scale,minimum-scale等~~~