一般移动设备的浏览器都默认设置了一个 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. Android菜鸟成长记10 -- ListVew

     ListView在我们学习Android的过程中是非常重要得一个部分. listview主要有两个职责 1)将数据填充到布局. 2)处理用户的选择点击等操作. 一个ListView的创建需要3个元素 ...

  2. Scala映射

    #映射: 包含一组键值对应元素的集合 val Z=Map(a1->b1,...)  //a1如果是字符,需要用双引号括起来 val Z=Map((a1,b1),...) ##可变映射, 内容可更 ...

  3. centos7 安装jdk7

    源码包准备: 首先到官网下载jdk,http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.htm ...

  4. SQL Cumulative Sum累积求和

    期望结果:  ID  VAL  CumSum  1  10  10  2  20  30  3  30  60 方法一: 使用分析函数 select id,val,sum(val) over ( or ...

  5. VBA Excel 对比两列数据

    Sub Md() ' ' Macro1 Macro ' 宏由 BX 录制,时间: 2012-6-8 ' 宏中的列数可以输入 A - IV 也可以输入 1-256 ' Dim i%, j%, i1%, ...

  6. C/C++入门---运算符

    1, 运算符的优先级 C语言的运算符共有15个优先级,各运算符及其优先级和结合律如下: 运算符 结合律 ()[]-> 从左到右 !~++ -- +(正号) -(负号) *(指针取址符) (typ ...

  7. MAC 安装 Protobuf

    1.确认MAC装有g++.make.vim工具 2.安装make工具使用       brew install make 3.安装protobuf brew install protobuf 4.安装 ...

  8. SQL注入的原理以及危害

    SQL注入,就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,比如先前的很多影视网站泄露VIP会员密码大多就是通过WEB表单递交查询字符 ...

  9. 粗略读完opengl

    清明节前粗略读完了opengl编程指南第七版,对opengl有了一个大体的了解,并且了解的也很肤浅.有了计算机图形学,线性代数的基础,读起来也不像以前那么吃力了.从简单的绘制点,直线,多边形,到视图变 ...

  10. 2、C语言关键字-auto register static

    文件限定符的作用: 1.auto : 局部变量,修饰的变量在栈中定义.动态内存,随着函数的结束,变量占用的内存空间也随之释放. 2.register : 寄存器变量,请求编译器将此变量存于cpu寄存器 ...