一般移动设备的浏览器都默认设置了一个 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. nginx支持pathinfo并且隐藏index.php

    How To Set Nginx Support PATHINFO URL Model And Hide The /index.php/ 就像这样 The URL before setting lik ...

  2. JSP开发模式1(简单注册功能)

    ———————————————————————————————————————————————— import java.util.regex.Matcher;import java.util.reg ...

  3. js常用

    window.navigator.userAgent.toLowerCase().indexOf("msie") != -1 是否是IE浏览器

  4. 史上最全的Python电子书教程资源下载(转)

    网上搜集的,点击即可下载,希望提供给有需要的人^_^   O'Reilly.Python.And.XML.pdf 2.02 MB   OReilly - Programming Python 2nd. ...

  5. 解决程序出现“terminate called after throwing an instance of 'std::bad_alloc' what(): std::bad_alloc Aborted (core dumped)”的问题

    最近跑程序时出现了这么一个问题: terminate called after throwing an instance of 'std::bad_alloc' what(): std::bad_al ...

  6. DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装

    打开VS2015,出现 “DNX SDK版本 “dnx-clr-win-x86.1.0.0-beta5”无法安装,该解决方案将对此会话使用DNX SDK版本“dnx-clr-win-x86.1.0.0 ...

  7. SQL 查询性能优化----解决书签查找

    先来看看什么是书签查找: 当优化器所选择的非聚簇索引只包含查询请求的一部分字段时,就需要一个查找(lookup)来检索其他字段来满足请求.对一个有聚簇索引的表来说是一个键查找(key lookup), ...

  8. 由Struts return SUCCESS引发的基础问题

    该问题的最初来源,是源于Struts中的 return SUCCESS; 和 return "success"; 在Struts的配置文件struts.xml我们可以找到" ...

  9. git 常见命令

    查看.添加.提交.删除.找回,重置修改文件 git help <command> # 显示command的help git show # 显示某次提交的内容 git show $id gi ...

  10. gulp系列文章一 fis vs grunt vs gulp,为什么要是gulp呢?

    gulp是最近火起来的前端构建工具,大有赶超grunt之势,它和grunt这种构建工具比较像. grunt是写一个Gruntfile.js来写配置代码,gulp则是写一个gulpfile.js来写配置 ...