viewport理解
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-scalable
,width=device-width
和initial-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理解的更多相关文章
- meta viewport 理解
移动设备上的浏览器如果不指明 viewport 这个meta,当你从移动设备上浏览网页的时候,它假设(你浏览的是桌面版并且你想看到所有的内容),不只是一个左上角.因此,它会把viewport的宽度设置 ...
- Web前端_流式布局(百分比布局)
移动Web_流式布局(百分比布局) writer:late at night codepeasant 1(百分比布局) ☞核心知识点 1.流式布局(百分比布局) 2.视口设置 ☞今日目标 1. 能够使 ...
- 移动前端开发之viewport的深入理解
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
- 转载:移动前端开发之viewport的深入理解
原文作者:无双 原文链接:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有 ...
- 移动前端开发之viewport的深入理解(转载)
本文为转载文章,原文网址:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有 ...
- 移动前端开发之 viewport 的深入理解
移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响 ...
- 移动前端开发之viewport的深入理解(转)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
- 转: 关于viewport的理解
最近我做了一点儿针对手机的Web开发和相关研究.按说,Web自设计之初,就已经考虑了设备无关性.然而,现实总是不尽如人意. 我们知道大多数网页都是针对桌面显示器开发和测试的,但是手机屏幕通常要比桌面显 ...
- 深入理解viewport(转)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
随机推荐
- Atitit.研发管理软件公司的软资产列表指南
Atitit.研发管理软件公司的软资产列表指南 1. Isv模型下的软资产1 2. 实现层面implet1 3. 规范spec层1 4. 法则定律等val层的总结2 1. Isv模型下的软资产 Sof ...
- Mysql - 查询之关联查询
查询这块是重中之重, 关系到系统反应时间. 项目做到后期, 都是要做性能测试和性能优化的, 优化的时候, 数据库这块是一个大头. sql格式: select 列名/* from 表名 where 条件 ...
- BRDF 光照模型
http://blog.csdn.net/liu_lin_xm/article/details/4846144
- Object是什么
Object是什么 .Net程序员们每天都在和Object在打交道如果你问一个.Net程序员什么是Object,他可能会信誓旦旦的告诉你"Object还不简单吗,就是所有类型的基类" ...
- 【腾讯Bugly干货分享】基于RxJava的一种MVP实现
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57bfef673c1174283d60bac0 Dev Club 是一个交流移动 ...
- 【腾讯Bugly干货分享】移动客户端中高效使用SQLite
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57b57f2a0703f7d31b9a3932 作者:赵丰 导语 iOS 程序能 ...
- HTML5 摇一摇加强版之一次失败的探索
最近在看设备传感器的API,当然也少不了研究一下让微信称神的“摇一摇”了.关于“摇一摇”的实现,网上很多资料所以不详细说了,但总是有布局.效果不全等各种问题,所以作为一名资深copypaster,代码 ...
- ABP(现代ASP.NET样板开发框架)系列之21、ABP展现层——Javascript函数库
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之21.ABP展现层——Javascript函数库 ABP是“ASP.NET Boilerplate Project ...
- tomcat RMI 停不掉
项目采用jfinal框架,做了一个RMI的服务,对其它程序提供服务.实现上,写了一个RmiPlugin package com.wisdombud.cloudtalk.plugin; import j ...
- My97DatePicker时间控件在项目中的应用
一.下载My97DatePicker的压缩包My97DatePicker.rar,解压. 注:My97DatePicker最新版本有开发包,项目中使用时删掉,以便节省空间,提高程序的运行效率. 二.在 ...