HTML5移动端开发中的Viewport标签及相关CSS用法解析


Posted in HTML / CSS onApril 15, 2016

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixel 设备逻辑像素 )和 CSS 像素之间的关系。这里首先了解以下几个概念。

layout viewport(布局视口)

一般移动设备的浏览器都默认设置了一个viewport 元标签,定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px,所以pc上的网页基本能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页。

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

visual viewport(视觉视口)备物理屏幕的可视区域,屏幕显示器的物理像素,同样尺寸的屏幕,像素密度大的设备,硬件像素会更多。例如iPhone的物理像素:

iPhone5 :640 * 1136
iPhone6:750 * 1334
iPhone6 Plus:1242 * 2208
ideal viewport(理想视口)和 dip (设备逻辑像素)

ideal viewport(理想视口)通常是我们说的屏幕分辨率。

dip (设备逻辑像素)跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。

比如MacBook Pro的 Retina (视网膜)屏显示器硬件像素是:2880 * 1800。当你设置屏幕分辨率为 1920 * 1200 的时候,ideal viewport(理想视口)的宽度值是1920像素, 那么 dip 的宽度值就是1920。设备像素比是1.5(2880/1920)。设备的逻辑像素宽度和物理像素宽度(像素分辨率)的关系满足如下公式:

逻辑像素宽度*倍率 = 物理像素宽度

而移动端手机屏幕通常不可以设置分辨率,一般都是设备厂家默认设置的固定值,换句话说 dip 的值就是 ideal viewport(理想视口)(也就是分辨率)的值,比如,iPhone的屏幕分辨率:

iPhone5 :分辨率 320 * 568,物理像素 640 * 1136,@2x
iPhone6:分辨率 375 * 667,物理像素 750 * 1334,@2x
iPhone6 Plus :分辨率 414 *  736,物理像素1242 * 2208,@3x,(注意,实际显示图像等比降低至1080×1920,具体原因我们文章最后会附带介绍)
HTML5移动端开发中的Viewport标签及相关CSS用法解析

CSS像素

CSS像素(px)用于页面布局的单位。样式的像素尺寸(例如 width: 100px)是以CSS像素为单位指定的。CSS像素与 dip 的比例即为网页的缩放比例,如果网页没有缩放,那么一个CSS像素就对应一个 dip(设备逻辑像素) 。

使用viewport元标签控制布局

首先看一下viewport元标签极其属性:

CSS Code复制内容到剪贴板
  1. <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">  

这里是每个属性的详细介绍:

属性名 取值 描述
width 正整数 或 device-width 定义视口的宽度,单位为像素
height 正整数 或 device-height 定义视口的高度,单位为像素,一般不用
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例,它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例,它必须大于或等于minimum-scale设置
user-scalable yes/no 定义是否允许用户手动缩放页面,默认值yes

width

width属性被用来控制layout viewport(布局视口)的宽度,layout viewport(布局视口)宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数,也可以设为device-width这一特殊值,一般为了自适应布局,普遍的做法是将width设置为device-width,例如:

CSS Code复制内容到剪贴板
  1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  

width=device-width 也就是将layout viewport(布局视口)的宽度设置 ideal viewport(理想视口)的宽度。网页缩放比例为100%时,一个CSS像素就对应一个 dip(设备逻辑像素),而layout viewport(布局视口)的宽度,ideal viewport(理想视口)的宽度(通常说的分辨率),dip 的宽度值是相等的。

height

与width类似,但实际上却不常用。

initial-scale

initial-scale用于指定页面的初始缩放比例:

CSS Code复制内容到剪贴板
  1. <meta name="viewport" content="initial-scale=1.5" />  

initial-scale=1 表示将layout viewport(布局视口)的宽度设置为 ideal viewport(理想视口)的宽度,initial-scale=1.5 表示将layout viewport(布局视口)的宽度设置为 ideal viewport(理想视口)的宽度的1.5倍。

maximum-scale

maximum-scale用于指定用户能够放大的最大比例,例如

CSS Code复制内容到剪贴板
  1. <meta name="viewport" content="initial-scale=1,maximum-scale=3" />  

假设页面的默认缩放值initial-scale是1,那么用户最终能够将页面放大到这个初始页面大小的3倍。

minimum-scale

类似maximum-scale的描述,不过minimum-scale是用来指定页面缩小比例的。通常情况下,不会定义该属性的值,页面太小将难以阅读。

user-scalable

user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes,可被缩放,你也可以将该值设置为no,表示不允许用户缩放网页。例如:

CSS Code复制内容到剪贴板
  1. <meta name="viewport" content="user-scalable=no" />  

PS:关于iPhone 的屏幕分辨率
iPhone 6 Plus 官方标称屏幕是 1920 x 1080 的,但是在 Xcode 中我们发现模拟器的屏幕其实是看似奇怪的 2208 × 1242,为什么呢?
HTML5移动端开发中的Viewport标签及相关CSS用法解析

这个缩小 17% 的比例是这么来的呢?来看 Stack Overflow 上的回答:iPhone 6 Plus resolution confusion: Xcode or Apple’s website? ,简单来说就是为了切图的放大倍数、实际渲染像素都是正整数。

HTML / CSS 相关文章推荐
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 #HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 #HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 #HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 #HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 #HTML / CSS
用html5绘制折线图的实例代码
Mar 25 #HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 #HTML / CSS
You might like
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
php实现数组重复数字统计实例
2018/09/30 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
Angular5.1新功能分享
2017/12/21 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python调用摄像头显示图像的实例
2018/08/03 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
公司新年寄语
2014/04/04 职场文书
小学生环保演讲稿
2014/04/25 职场文书
2015入党自荐书范文
2015/03/05 职场文书
军训决心书范文
2015/09/22 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
MySQL RC事务隔离的实现
2022/03/31 MySQL