#笔记# 移动前端开发之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就是设备的屏幕上能用 ...
随机推荐
- Android菜鸟成长记10 -- ListVew
ListView在我们学习Android的过程中是非常重要得一个部分. listview主要有两个职责 1)将数据填充到布局. 2)处理用户的选择点击等操作. 一个ListView的创建需要3个元素 ...
- Scala映射
#映射: 包含一组键值对应元素的集合 val Z=Map(a1->b1,...) //a1如果是字符,需要用双引号括起来 val Z=Map((a1,b1),...) ##可变映射, 内容可更 ...
- centos7 安装jdk7
源码包准备: 首先到官网下载jdk,http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.htm ...
- SQL Cumulative Sum累积求和
期望结果: ID VAL CumSum 1 10 10 2 20 30 3 30 60 方法一: 使用分析函数 select id,val,sum(val) over ( or ...
- VBA Excel 对比两列数据
Sub Md() ' ' Macro1 Macro ' 宏由 BX 录制,时间: 2012-6-8 ' 宏中的列数可以输入 A - IV 也可以输入 1-256 ' Dim i%, j%, i1%, ...
- C/C++入门---运算符
1, 运算符的优先级 C语言的运算符共有15个优先级,各运算符及其优先级和结合律如下: 运算符 结合律 ()[]-> 从左到右 !~++ -- +(正号) -(负号) *(指针取址符) (typ ...
- MAC 安装 Protobuf
1.确认MAC装有g++.make.vim工具 2.安装make工具使用 brew install make 3.安装protobuf brew install protobuf 4.安装 ...
- SQL注入的原理以及危害
SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,比如先前的很多影视网站泄露VIP会员密码大多就是通过WEB表单递交查询字符 ...
- 粗略读完opengl
清明节前粗略读完了opengl编程指南第七版,对opengl有了一个大体的了解,并且了解的也很肤浅.有了计算机图形学,线性代数的基础,读起来也不像以前那么吃力了.从简单的绘制点,直线,多边形,到视图变 ...
- 2、C语言关键字-auto register static
文件限定符的作用: 1.auto : 局部变量,修饰的变量在栈中定义.动态内存,随着函数的结束,变量占用的内存空间也随之释放. 2.register : 寄存器变量,请求编译器将此变量存于cpu寄存器 ...