• viewport就是这回事


    前言

    对于移动webapp开发人员来说,viewport是个很重要的东西,容易用但很多时候都是不明白的,于是我决心去弄清楚它。

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

    viewport涉及的单位

    分辨率:指设备显示器所能显示的像素有多少

    物理分辨率:指设备显示器所能显示最高的像素数

    DPI (Dots Per Inch):每英寸的点数密度

    PPI(Pixels Per Inch):每英寸的像素点

    DIP/DP(device independent pixels): 设备独立像素, 这个由设备硬件决定。

    devicePixelRatio : 设备像素比 ( window.devicePixelRatio = 物理分辨率 / dip )

    PS:在计算机或移动屏幕中提到ppi和dpi其实都一样, 越高的PPI所呈现的内容越清晰。

    什么是viewport?

    其实手机浏览器装载页面是放在一个中间件里面的,而这个中间件就是viewport。(起初是ios提出的,后来android借用了)

    viewport重要概念

    1.可视区(visual area) : 就是我们设备上能看到页面的区域 (这个长度不是固定的)。

    2.设备宽度(device-width) : 这个就是DIP的值,即是设备独立像素,由设备硬件本身决定(iPhone4S 是 320, iPhone6 plus 是 414, 魅蓝 是 432 )

    PS:device-width一般值范围是320—432

    viewport属性

    width:viewport 的宽度

    height:viewport的高度 (很少使用)

    initial-scale:设置页面的初始缩放值

    minimum-scale:允许用户的最小缩放值

    maximum-scale:允许用户的最大缩放值

    user-scalable:是否允许用户进行缩放

    target-densitydpi(android才生效):设备的密度等级

    PS:讲上面所有属性是没有必要的,我理出最重要的三个属性来说明,即可理解viewport

    viewport重要属性

    三个重要属性是分别是width、initial-scale、target-densitydpi(这个属性放后面讲)

    width与initial-scale组合设置,有四种不同的情况(android上设initial-scale无效的,这个后面讲,先讲ios上的情况),iPhone4S(它的设备宽度是320)上测试:

    1.设width(固定值),不设initial-scale

    ios浏览器会为了调整页面能够满屏显示,会自动计算缩放比,即initial-scale

    例如:设置width=640 

         viewport width = 640px

             缩放比 =  320  / 640 = 0.5

             可视区宽度 = 设备宽度 / 缩放比  = 320 / 0.5 = 640px

    PS:上面这条可视区宽度的计算公式是我测试得出的, 不过回过头看某些介绍viewport文章, 他们也有介绍。

    2.设width(固定值),设initial-scale = 1.0

    例如:设置width=640

             viewport width = 640px  

             缩放比 = 1.0

             可视区宽度 = 设备宽度 / 缩放比  = 320 / 1.0 = 320px

    PS:所以如果这样设置,就会出现页面只显示了一半的情况。

    3.设width为device-width, 不设initial-scale

    没有设initial-scale情况下,initial-scale一直是1.0

    例如:设置width=device-width

             viewport width = 320px (iPhone4s设备宽度)

             缩放比 = 1.0

             可视区宽度 = 设备宽度 / 缩放比  = 320 / 1.0 = 320px

    4.设width为device-width, 设initial-scale = 0.5

    例如:设置width=device-width

             viewport width = 320px (iPhone4s设备宽度)

             缩放比 = 0.5

             可视区宽度 = 设备宽度 / 缩放比  = 320 / 0.5 = 640px

    PS:这个时候显示的页面是640px宽

    说到这里,大家应该对各种设置viewport的方式有一定的了解。

    viewport之android

    这里之所以把android单独拿出来,就是target-densitydpi(以后的android版本会废弃)这个属性的问题。

    对于android来讲,initial-scale在大部分机型上无效的,无论是0.5或2都不会变化,但这不影响我们使用viewport。

    target-densitydpi这个属性设置设备使用什么dpi显示,其实在我的理解来说,其实就是充当缩放的功能。

    target-densitydpi取值:可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个。

    一些特殊取值:

    low-dpi : 120

    medium-dpi : 160  

    high-dpi : 240

    xhdpi : 320

    xxhdpi : 400

    PS:不设置的情况下,默认选择的是 medium-dpi(但有些机型默认不是这个,像小米1默认就是high-dpi)

    设置target-densitydpi这些值会导致怎么样的缩放呢?

    缩放的比是与 medium-dpi的比:

    120 ->   120/160  = 0.75

    160 ->   160/160 = 1           (华为荣耀xx   device-dpi)

    240 ->   240/160 = 1.5        (小米1   device-dpi)

    320 ->   320/160 = 2           (联想乐檬  device-dpi)

    400 ->   400/160 = 2.5        (魅蓝   device-dpi)

    PS:后面括号里是我测试的机型它们各自的device-dpi

    例如:

    1.当你设target-densitydpi = 240时:

       华为荣耀xx可视区宽度 =  设备宽度 * dpi比值  = 360 * 1.5 = 540

       小米1可视区宽度 =  设备宽度 * dpi比值  = 320 * 1.5 = 480

       联想乐檬可视区宽度 =  设备宽度 * dpi比值  = 360 * 1.5 = 540

       魅蓝可视区宽度 =  设备宽度 * dpi比值  = 432 * 1.5 = 648

    2. 当你设target-densitydpi = device-dpi时:

       华为荣耀xx可视区宽度 =  设备宽度 * dpi比值  = 360 * (160/160) = 360

       小米1可视区宽度 =  设备宽度 * dpi比值  = 320 * (240/160) = 480

       联想乐檬可视区宽度 =  设备宽度 * dpi比值  = 360 * (320/160)= 720

       魅蓝可视区宽度 =  设备宽度 * dpi比值  = 432 * (400/160) = 1080

    PS:根据上面的结论,我强烈建议不要使用 target-densitydpi = device-dpi, 因为不同设备上最终的可视区的宽度差异很大,除非你的app有为之做处理(rem、em的相对单位写法)。

    viewport的东西也大体讲到这里!

    注意:

    1.何时viewport width设置固定值?

    当你的页面为某个固定宽度,或者里面的元素长宽和字体大小在某种宽度显示才看起来正常时候。

    2.固定viewport width的注意事项

    当设备横竖屏切换时候,就需要切换viewport的width值,而且手机和平板的viewport width也是不同的。

    3.viewport的width多大多小?

    当width小于设备宽度时候按设备宽度计算,而能设多大这个想法并没什么意义。

    总结:

    其实说了那么多,其实就回到开头那句代码,而最终建议设的viewport也是那一句,也希望我的想法大家能理解,如果有错误地方请指正。

    附上ios对viewport的讲解:Configuring the Viewport

    本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

  • 相关阅读:
    可恶的0x1A
    求关注 wcf bindipendpointdelegate 端口限制的功能
    2015 UESTC Training for Data Structures
    Codeforces Round #298 (Div. 2)
    利用rawcap抓包(自己发给自己的包裹)
    PYTHON POST练手
    CentOS安装Nginx 实现HTTP代理
    how to make vim show ^M and substitute it
    Oracle SQL Developer: cannot find a j2se sdk
    Codeforces Round #282 (Div. 2)
  • 原文地址:https://www.cnblogs.com/lovesong/p/4355029.html
Copyright © 2020-2023  润新知