• 梳理:移动端Viewport的知识


    ————  再次阅读了《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等~~~

      

  • 相关阅读:
    HL7数据类型分析(1)
    HL7 CDA高级培训
    JAVA开发常用类(二)
    Oracle中函数返回数据集
    Delphi中DLL或Package窗体载入与显示
    在乐山交流医疗保险审核工作
    JAVA开发常用类(一)
    JAVA开发常用类(三)
    Oracle函数返回超长字符串问题
    基于ODP的数据层基类C#源码
  • 原文地址:https://www.cnblogs.com/jaykoo/p/9831089.html
Copyright © 2020-2023  润新知