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预备知识的更多相关文章
- 从0开发3D引擎(二):准备预备知识
大家好,本文介绍了开发3D引擎需要的预备知识,给出了相关的资源. 上一篇博文 从0开发3D引擎(一):开篇 了解Web 3D Web 3D的历史 目前Web 3D是基于WebGL这个Web端3D AP ...
- 移动WEB viewport 相关知识
了解移动web viewport的知识,主要是为了切图时心中有数.本文主要围绕一个问题:切图时怎样设置<meta name="viewport">相关参数?围绕这个问题 ...
- 驱动开发学习笔记. 0.06 嵌入式linux视频开发之预备知识
驱动开发读书笔记. 0.06 嵌入式linux视频开发之预备知识 由于毕业设计选择了嵌入式linux视频开发相关的项目,于是找了相关的资料,下面是一下预备知识 UVC : UVC,全称为:USB v ...
- 受限玻尔兹曼机(RBM)学习笔记(一)预备知识
去年 6 月份写的博文<Yusuke Sugomori 的 C 语言 Deep Learning 程序解读>是囫囵吞枣地读完一个关于 DBN 算法的开源代码后的笔记,当时对其中涉及的算法原 ...
- 学习Identity Server 4的预备知识
我要使用asp.net core 2.0 web api 搭建一个基础框架并立即应用于一个实际的项目中去. 这里需要使用identity server 4 做单点登陆. 下面就简单学习一下相关的预备知 ...
- JAVA面向对象-----面向对象(基础预备知识汇总)
终于整理好了面向对象基础预备知识,但是有点多,所以你们懂的,贴图,较长的代码我还是会排版出来的,我不想把时间浪费在排版上在word里排版一次已经很浪费时间了,所以请谅解. public class C ...
- 用ASP.NET Core 2.0 建立规范的 REST API -- 预备知识 (2) + 准备项目
上一部分预备知识在这 http://www.cnblogs.com/cgzl/p/9010978.html 如果您对ASP.NET Core很了解的话,可以不看本文, 本文基本都是官方文档的内容. A ...
- ASP.NET Core的实时库: SignalR -- 预备知识
大纲 本系列会分为2-3篇文章. 第一篇介绍SignalR的预备知识和原理 然后会介绍SignalR和如何在ASP.NET Core里使用SignalR. 本文的目录如下: 实时Web简述 Long ...
- 学习Identity Server 4的预备知识 (误删, 重补)
我要使用asp.net core 2.0 web api 搭建一个基础框架并立即应用于一个实际的项目中去. 这里需要使用identity server 4 做单点登陆. 下面就简单学习一下相关的预备知 ...
随机推荐
- UI性能优化
我的思路 在移动设备上打开UI界面卡顿,等待时间长,页面白块,等等体验是很不好的.本文记录我在工作中解决UI卡顿的方法. 我主要从以下方面入手 资源量 界面打开做的操作 界面自身的逻辑 IO的读写(包 ...
- linux应用态下的时间
1.时间值 1.1 日历时间(UTC) 该值是自1 9 7 0年1月1日0 0 : 0 0 : 0 0以来国际标准时间( U T C)所经过的秒数累计值(早期的手册称 U T C为格林尼治标准时间) ...
- Nginx干货(一)隐藏Nginx标识与版本号
注:默认读者自己会安装nginx,不会的就搜一下怎么安装吧.说明一点.在make的时候可以使用make -j num这里面的num是你的cpu核心数.这样会快一点~~~意为以num个进程同时编译 首先 ...
- mybatis中#和$符号的区别(转)
mybatis做为一个轻量级ORM框架在许多项目中使用,因其简单的入门受到了广大开发者的热爱.在近期项目中再做一个相关的开发,碰到了#.$符号这样的问题,之前没怎么注意过,通过学习之后,有了点感悟,分 ...
- 【CSS3】定位
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JavaWeb框架_Struts2_(五)----->Struts2的标签库
1. Struts2的标签库 1.1 Struts2标签库概述 Struts2的标签库可以分为以下3类:用户界面标签.非用户界面标签.AJAX标签; 2.1.1 Struts2标签库的分类和使用 1 ...
- Java I/O---添加属性和有用的接口—FilterlnputStream&FilterOutputStream
0.装饰器模式 Java I/O类库需要多种不同功能的组合,这正是使用装饰器模式的理由所在.这也是Java I/O类库里存在filter(过滤器)类的原因所在,抽象类filter是所有装饰器类的基类. ...
- bzoj 2588 Count on a tree
Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...
- apache泛域名解析
<VirtualHost *:80> DocumentRoot "E:\work\phpStudy\WWW\ncpx\web" ServerName ncp ...
- 为什么硬链接不能链接目录、文件inode 和目录 dentry 的区别联系
我们对任何一个目录用ls -l 命令都可以看到其连接数至少是2,这也说明了系统中是存在硬连接的,而且命令ln -d 也可以让超级用户对目录作硬连接,这些都说明了系统限制对目录进行硬连接只是一个硬性规定 ...