前言

对于移动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

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

viewport就是这回事的更多相关文章

  1. 移动WEB开发之viewport

    问题: 在codepen上写了一个响应式页面,调试的时候没有问题.结果放到网站上,在手机上打开之后竟然和在电脑中的布局是一样的.         查阅资料之后知道响应式布局应该有这样一句话:<m ...

  2. 移动前端开发之viewport的深入理解

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

  3. viewport ---移动端详解

    转自---http://www.cnblogs.com/2050/p/3877280.html 移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上 ...

  4. 转载:移动前端开发之viewport的深入理解

    原文作者:无双 原文链接:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有 ...

  5. HTML Meta标签中的viewport属性含义及设置

    两篇文章 第1篇文章 第2篇文章 http://blog.hexu.org/archives/1947.shtml 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移 ...

  6. 移动前端开发之viewport的深入理解(转载)

    本文为转载文章,原文网址:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有 ...

  7. 移动前端开发之 viewport 的深入理解

    移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响 ...

  8. 移动前端之viewport

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

  9. 移动前端开发之viewport的深入理解(转)

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

随机推荐

  1. iOS开发-UI 从入门到精通(四)

    一.UITextField 1.UITextField是什么? (1)UITextField(输入框):是控制文本输入和显示的控件.在App中UITextField出现频率也比较高: (2)iOS系统 ...

  2. WWDC 后苹果最新 App Store 审核条款!

        WWDC 2016 大会之后,苹果公司发布了四个全新平台:iOS,macOS,watchOS 和 tvOS.并且在此之后,苹果应用商店审核条款也同时进行了更新——貌似不算进行了更新,简直就是重 ...

  3. C# 6.0新特性

    因为在博客中给出的代码大多数都使用了C#6.0的新特性,如果各位对C#6.0还不了解,可以简单的看一下这篇随笔.o( ̄▽ ̄)d 先来看一个Point类 public class Point { pub ...

  4. Redis 支持的5种数据结构

    redis的崛起绝非偶然,它确实有自己的新东西在里面,它不像Memcached,只能将数据存储在内存中,它提供了持久化机制和数据同步,避免了宕机后的雪崩的问题,即服务器出现问题后,内存中保留的原始数据 ...

  5. 基于Windows 10平台的PM2.5检测器制作

    本篇文章详细讲解了如何利用SDS011激光式PM2.5传感器.HC-06蓝牙模块和Windows 10设备完成一个简单的PM2.5检测器及其应用程序的开发.该检测器使用蓝牙完成数据输出,方便设备连接, ...

  6. mysql: unknown variable 'character-set-client=utf8'

    在同事安装的MySQL服务器上(居然安装的是My-SQL 5.1.73的老旧版本),登录MySQL时遇到下面"mysql: unknown variable 'character-set-c ...

  7. .NET应用架构设计—面向查询的领域驱动设计实践(调整传统三层架构,外加维护型的业务开关)

    阅读目录: 1.背景介绍 2.在业务层中加入核心领域模型(引入DomainModel,让逻辑.数据有家可归,变成一个完整的业务对象) 3.统一协调层Application Layer(加入协调层来转换 ...

  8. Neutron 理解 (8): Neutron 是如何实现虚机防火墙的 [How Neutron Implements Security Group]

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  9. 理解 OpenStack 高可用(HA)(2):Neutron L3 Agent HA 之 虚拟路由冗余协议(VRRP)

    本系列会分析OpenStack 的高可用性(HA)概念和解决方案: (1)OpenStack 高可用方案概述 (2)Neutron L3 Agent HA - VRRP (虚拟路由冗余协议) (3)N ...

  10. 尽量不要用ad,adv···,advertisement 这些关键词命名

    html dom,文件夹名称,文件名称·······,都尽量不用ad,adv···,advertisement  这些关键词! 为嘛呢? 因为会被浏览器的广告插件自动给屏蔽掉. 我的网站中有一个广告管 ...