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 相关文章推荐
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 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
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
如何用Python破解wifi密码过程详解
2019/07/12 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python实现结构体代码实例
2020/02/10 Python
Python序列化pickle模块使用详解
2020/03/05 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
python新手学习使用库
2020/06/11 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
在校生钳工实习自我鉴定
2013/09/19 职场文书
法务专员岗位职责
2014/01/02 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
质量负责人任命书
2014/06/06 职场文书
科技工作者先进事迹
2014/08/16 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
英文导游词
2015/02/13 职场文书
综治目标管理责任书
2015/05/11 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang