viewport预备知识

dpr === dppx

dpr:device pixel ratio 设备像素比

dppx:Number of dots per px unit 每像素有多少点 。 1dppx = 96dpi

dpr = 设备物理像素 / 设备独立像素

设备物理像素指显示在移动端中实际的像素。设备独立像素是css中定义的像素。

比如说iphone4 的 dpr = 2,而此时设置border的宽度为1px(设备独立像素),那么此时设备物理像素为2px。所以在移动端上看到的是2px的边框。

也就是说,n个独立像素 = dpr * m 个物理像素。

window.innerWidth:保存可见视口,也就是屏幕上可见页面区域的大小。移动IE不支持这个属性。

document.body.clientWidth:度量布局视口,即渲染后页面的实际大小(与可见视口不同,可见视口只是页面中的一小部分)。

viewport

viewport就是设备的屏幕上能用来显示网页的那一块区域,具体一些,就是浏览器上用来显示网页的那部分区域。

默认情况下,移动设备上的viewport都是大于浏览器可视区域的。这种默认的设置是为了考虑到移动设备能够正常访问到为PC设计的网站。移动设备上的viewport默认情况下为980px或者1024px。

但移动设备上默认的viewport带来的结果就是mobile浏览器在浏览网站时会出现横向滚动条。因为移动设备上浏览器的viewport(visual viewport)是比移动设备默认的viewport(layout viewport)的宽度要小很多的。

layout viewport

移动端默认viewport。layout viewport与PC端浏览器的区域宽度相同。目的是使为PC端开发的页面同样可以显示在移动端上。layout viewport可以通过document.body.clientWidth获取。

layout viewport 不会随着用户双击屏幕时发生改变。下图是double click之前的效果。

visual viewport

移动端浏览器实际的可视区域的宽度。默认情况下,layout viewport的宽度是大于visual viewport的。visual viewport可以通过window.innerWidth获取。

visual viewport 会随着用户双击屏幕时发生改变。下图是double click之后的效果。

ideal viewport

ideal viewport指的是首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容。然后,显示的文字的大小是合适。比如一段14px大小的文字,不会因为在一个高密度像素的屏幕里显示得太小而无法看清,理想的情况是这段14px的文字无论是在何种密度屏幕,何种分辨率下,显示出来的大小都是差不多的。当然,不只是文字,其他元素如图片什么的也是这个道理。

ppk把这个viewport叫做 ideal viewport,也就是第三个viewport——移动设备的理想viewport。

ideal viewport并没有一个固定的尺寸,不同的设备拥有有不同的ideal viewport。iphone4和iphone3的ideal viewport宽度都是320px,无论它的屏幕宽度是320还是640,也就是说,在iphone4和iphone3中,css中的320px就代表它们屏幕的宽度。

meta标签解析

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

width=device-width:layout viewport的宽度等于设备宽度,这里的设备宽度指的是visual viewport,layout viewport = visual viewport 就可以得到 ideal viewport

initial-scale:初始缩放比例。这里说的缩放比例是指layout viewport与visual viewport的比例。当比例为1时就表示两个值相等,则变成了ideal viewport了。initial-scale成立的前提条件是必须禁止用户缩放页面的行为,因为visual viewport会随着用户缩放页面而改变,那么此时initial-scale的值就不准确了。

所以这里可以width=device-width和initial-scale作用是等价的,都是用于控制layout viewport和visual viewport的值是否相等。

minimum-scale:允许用户的最小缩放比例,为一个数字,可以带小数。

maximum-scale:允许用户的最大缩放比例,为一个数字,可以带小数。

user-scalable:是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许。

经过我的测试,在移动前端开发meta标签设置时,content属性的必须设置的是user-scalablewidth=device-widthinitial-scale=1其中选一。单独设置maximum-scale和minimum-scale是不起作用的。即

有效:<meta name='viewport' content='width=device-width, user-scalable=1'>

有效:<meta name='viewport' content='initial-scale=1, user-scalable=1'>

无效:<meta name='viewport' content='maximum-scale=1, minimum-scale=1, user-scalable=1'>

要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但这两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应该是,两者都写上去,这样就 initial-scale=1 解决了 iphone、ipad的毛病,width=device-width则解决了IE的毛病。

viewport理解的更多相关文章

  1. meta viewport 理解

    移动设备上的浏览器如果不指明 viewport 这个meta,当你从移动设备上浏览网页的时候,它假设(你浏览的是桌面版并且你想看到所有的内容),不只是一个左上角.因此,它会把viewport的宽度设置 ...

  2. Web前端_流式布局(百分比布局)

    移动Web_流式布局(百分比布局) writer:late at night codepeasant 1(百分比布局) ☞核心知识点 1.流式布局(百分比布局) 2.视口设置 ☞今日目标 1. 能够使 ...

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

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

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

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

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

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

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

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

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

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

  8. 转: 关于viewport的理解

    最近我做了一点儿针对手机的Web开发和相关研究.按说,Web自设计之初,就已经考虑了设备无关性.然而,现实总是不尽如人意. 我们知道大多数网页都是针对桌面显示器开发和测试的,但是手机屏幕通常要比桌面显 ...

  9. 深入理解viewport(转)

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

随机推荐

  1. css实现文本框和下拉框结合的案例

    html 代码部分 <div id="list-name-input" class="list-name-input"> <select ty ...

  2. BZOJ 1010: [HNOI2008]玩具装箱toy [DP 斜率优化]

    1010: [HNOI2008]玩具装箱toy Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 9812  Solved: 3978[Submit][St ...

  3. AngularJS 第三天----作用域

    作用域的概念及其功能 AngularJS使用作用域的概念来充当数据模型的作用,在视图和控制器之间起着桥梁的作用.由于双向绑定的数据特性,视图的修改会更新 $scope,同样对 $scope的修改也会重 ...

  4. EasyPR--开发详解(8)文字定位

    今天我们来介绍车牌定位中的一种新方法--文字定位方法(MSER),包括其主要设计思想与实现.接着我们会介绍一下EasyPR v1.5-beta版本中带来的几项改动. 一. 文字定位法 在EasyPR前 ...

  5. android内部培训视频_第五节(1)_OA实战之登录界面

    第五节(1):OA实战之登录界面  一.登录界面布局 1.背景图片 2.文本框 3.checkbox 4.按钮 暂未实现点击切换图片效果 <RelativeLayout xmlns:androi ...

  6. 免费的精品: Productivity Power Tools 动画演示

    Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率.它的出现一定程度上弥补和完善了 Visual Studio 自身的不足, ...

  7. Azure 上通过 SendGrid 发送邮件

    SendGrid 是什么? SendGrid 是架构在云端的电子邮件服务,它能提供基于事务的可靠的电子邮件传递. 并且具有可扩充性和实时分析的能力.常见的用例有: 自动回复用户的邮件 定期发送信息给用 ...

  8. 浅析Java 泛型

    泛型是JavaSE5引入的一个新概念,但是这个概念在编程语言中却是很普遍的一个概念.下面,根据以下内容,我们总结下在Java中使用泛型. 泛型使用的意义 什么是泛型 泛型类 泛型方法 泛型接口 泛型擦 ...

  9. Python的魔法函数之 - __len__,__getitem__,__setitem__,__delitem__

    # 对象作为len()函数的参数是必须实现该方法 __len__ # 使用类似字典方式访问成员时必须实现 dic['pro_name'] __getitem__ # 使用类似字典方式设置成员时必须实现 ...

  10. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...