#笔记# 移动前端开发之viewport
一般移动设备的浏览器都默认设置了一个 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的更多相关文章
- 移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
- 移动前端开发之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的深入理解
今天去面试,被问到一个用了一万次的东西,然而我并不了解具体是个毛毛,看这一篇豁然开朗. DevicePixelRatio 以及这句话:移动设备上的viewport分为layout viewport ...
- 【前端系列】移动前端开发之viewport的深入理解
在页面上没有设置width所以样式显示有问题,本来选择的响应式模式的320*410结果看到页面的实际宽度确实980px. 本文转载自: 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的 ...
- 移动前端开发之viewport的深入理解 --- 待续
在移动设备上进行网页的重构或开发, 只有明白了viewport的概念 才能 响应 各种 不同分辨率 的移动设备 一.viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用 ...
随机推荐
- error-2016-1-18
SSL 连接出错 错误: "System.Net.Mail.SmtpException"类型的未经处理的异常在 System.dll 中发生 其他信息: SMTP 服务器要求安全连 ...
- gson基本使用
http://www.jianshu.com/p/d62c2be60617 http://blog.csdn.net/lk_blog/article/details/7685169
- eclipse color theme 选择一款适合你的代码样式
1 点击eclipse菜单栏上的Help ->Install New Softwave , 点击add按钮 随便写个名字 ,添加 地址 http://eclipse-color-theme ...
- 介绍开源的.net通信框架NetworkComms框架之三 传递List
原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架 作者是英国人 以前是收费的 目前作者已经开源 开源地 ...
- Python——函数的命名关键字参数
命名关键字参数 对于关键字参数,函数的调用者可以传入任意不受限制的关键字参数.至于到底传入了哪些,就需要在函数内部通过kw检查. 仍以person()函数为例,我们希望检查是否有city和job参数: ...
- 转-servlet 获取 post body 体用流读取为空的问题
目前基于rest风格的很多API开始使用通过body data来传输来代替之前的key-value传输方式.在Java servlet或者springmvc中可以通过如下代码来获取并图片通过流方式传输 ...
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- AndroidSQLite多出一个(db.journal文件原因)
今天在Android开发中中将sqlite的数据库创建之后,发现生成的.db文件的旁边 生成了一个大小为0的与数据库文件同名的.db-journal文件,不明白此文件的用途,于是 google了sql ...
- Linux常用命令笔记一
笔记1:查看ubuntu是32位还是64位的方法及其版本号 查看ubuntu是64还是32的命令如下: uname -m 如果是i386到i686,那就是32位系统:如果是x86_64 ,那就是64系 ...
- NI Labview 将图形化系统设计用于肿瘤治疗
NI Labview 将图形化系统设计用于肿瘤治疗 - Jeff Stevens, Sanarus 挑战:在严格的规则条例范围内保持设计过程的情况下,为通过FDA认证的等级II医疗设备进行设计.原型并 ...