一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题。下面我们来认识几个与 viewport 相关的名词:

layout viewport(布局视口)

布局视口是页面布局的实际宽度。iOS, Android基本都将这个视口初始设置为 980px。

    • 网页缩放比例(initial-scale)

CSS像素与设备逻辑像素的比例即为网页的缩放比例。如果网页没有缩放,那么一个CSS像素就对应一个 dip(设备逻辑像素) 。在ios下会根据当前设备自动计算缩放比例,使布局视口在缩放后刚好布置在视觉视口中,不会出现滚动条。

visual viewport(视觉视口)-物理像素

视觉视口是移动设备物理屏幕的可视区域,是屏幕显示器的物理像素,同样尺寸的屏幕,像素密度大的设备,硬件像素会更多。

ideal viewport(理想视口)- dip(设备逻辑像素)

理想视口通常是我们说的屏幕显示的实际分辨率,设备逻辑像素的值就是理想视口的值。一个设备逻辑像素在任意像素密度的设备屏幕上都占据相同的空间(设备逻辑像素跟设备的硬件像素无关)。我们可以通过设置viewport标签让理想视口占满视觉视口。

设置方式:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:

width 设置layout viewport  的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport  的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。

参考:

“HTML5移动端开发中的Viewport标签及相关CSS用法解析” http://www.jb51.net/html5/451267.html

“移动前端开发之viewport的深入理解” http://www.cnblogs.com/2050/p/3877280.html

#笔记# 移动前端开发之viewport的更多相关文章

  1. 移动前端开发之viewport,devicePixelRatio的深入理解

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...

  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. 移动前端开发之 viewport 的深入理解

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

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

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

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

    今天去面试,被问到一个用了一万次的东西,然而我并不了解具体是个毛毛,看这一篇豁然开朗. DevicePixelRatio 以及这句话:移动设备上的viewport分为layout viewport  ...

  8. 【前端系列】移动前端开发之viewport的深入理解

    在页面上没有设置width所以样式显示有问题,本来选择的响应式模式的320*410结果看到页面的实际宽度确实980px. 本文转载自: 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的 ...

  9. 移动前端开发之viewport的深入理解 --- 待续

    在移动设备上进行网页的重构或开发, 只有明白了viewport的概念 才能 响应 各种  不同分辨率 的移动设备 一.viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用 ...

随机推荐

  1. error-2016-1-18

    SSL 连接出错 错误: "System.Net.Mail.SmtpException"类型的未经处理的异常在 System.dll 中发生 其他信息: SMTP 服务器要求安全连 ...

  2. gson基本使用

    http://www.jianshu.com/p/d62c2be60617 http://blog.csdn.net/lk_blog/article/details/7685169

  3. eclipse color theme 选择一款适合你的代码样式

    1 点击eclipse菜单栏上的Help ->Install New Softwave , 点击add按钮 随便写个名字 ,添加  地址   http://eclipse-color-theme ...

  4. 介绍开源的.net通信框架NetworkComms框架之三 传递List

    原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  开源地 ...

  5. Python——函数的命名关键字参数

    命名关键字参数 对于关键字参数,函数的调用者可以传入任意不受限制的关键字参数.至于到底传入了哪些,就需要在函数内部通过kw检查. 仍以person()函数为例,我们希望检查是否有city和job参数: ...

  6. 转-servlet 获取 post body 体用流读取为空的问题

    目前基于rest风格的很多API开始使用通过body data来传输来代替之前的key-value传输方式.在Java servlet或者springmvc中可以通过如下代码来获取并图片通过流方式传输 ...

  7. js高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  8. AndroidSQLite多出一个(db.journal文件原因)

    今天在Android开发中中将sqlite的数据库创建之后,发现生成的.db文件的旁边 生成了一个大小为0的与数据库文件同名的.db-journal文件,不明白此文件的用途,于是 google了sql ...

  9. Linux常用命令笔记一

    笔记1:查看ubuntu是32位还是64位的方法及其版本号 查看ubuntu是64还是32的命令如下: uname -m 如果是i386到i686,那就是32位系统:如果是x86_64 ,那就是64系 ...

  10. NI Labview 将图形化系统设计用于肿瘤治疗

    NI Labview 将图形化系统设计用于肿瘤治疗 - Jeff Stevens, Sanarus 挑战:在严格的规则条例范围内保持设计过程的情况下,为通过FDA认证的等级II医疗设备进行设计.原型并 ...