移动端开发学习1:viewport

前言

时间:2015-11-18

在当今手机端流量占了半壁江山的时代,让网页适配移动端也是前端开发者需要下功夫的地方,了解viewport是基本要求。

1. 什么是viewport ?

viewport的概念最早是由Safari浏览器提出来的,viewport可以看作是一个虚拟的窗口,开发者可以改变其属性来控制这个窗口。

在PC上,我们可以使用鼠标,任意的改变窗口的大小,也可以使用浏览器右边的滚动条来拖动页面。然而,在手机浏览器里,我们只能使用手指来点击或者滑动,例如双击来放大,两个手指合并来缩小等等。

手机端和PC端viewport的区别

  • PC端

    PC端 viewport 就是在用户在浏览器中能够看到的地方(即浏览器窗口的可视区域)。 如果页面超过了这个窗口,就会显示出滚动条,用户可以使用滚动条来改变viewport,以获得更多的内容。

  • 手机端

    与PC端的viewport不同, 手机端viewport是指整个网页内容。没错,就是说手机屏幕的可视区域的大小并不是这里所说的viewport的大小,viewport可能大于手机的可视区域(页面宽度大于手机屏幕宽度),也有可能小于手机的可视区域。

2. 为什么要使用viewport ?

先介绍两个概念: CSS pxdevice px

  • CSS px 是虚拟的,可以根据环境来匹配真实像素

  • device px 是物理上真是存在的

前面介绍了viewport的简单概念,那么为什么要剔除这个概念,或者说这个viewport在手机上解决了什么问题呢?

这个问题来源于手机的快速发展,在早起,手机的分辨率低于或者等于PC的分辨率,并没有超过320PPI(即视网膜屏)的手机,现在(2015年)基本手机都达到了或者超过了这个水平。

以三星S4 为例,分辨率为1920 * 1080,441PPI,而我的PC显示器是1440 * 900 的分辨率。也就是说,同样200px * 200px 的div在电脑里显示我们能看的清,但是在手机中由于屏幕小,自然就把这个div给压缩了。相当于把你的显示器给压缩成手机大小,里面显示的内容也等比例压缩了,这样对于在手机端浏览页面非常费劲,字太小,每次都要缩放,移动,缩放,再移动。

3. viewport如何使用

下面是name=”viewport” 时的 content 可以使用的值

Value可能的取值描述
width一个正整数像素值(不用加px)或者 device-width定义虚拟viewport的像素宽度
height一个正整数像素值(不用加px)或者 device-height定义虚拟viewport的像素宽度
initial-scale0.0 - 10.0定义初始加载时设备宽度与viewport的缩放比
maximum-scale0.0 - 10.0定义用户允许的最大缩放比
minimum-scale0.0 - 10.0定义用户允许的最大缩放比
user-scaleyes / no默认为yes,允许用户缩放

现在1080P的手机几乎占满了市场,在1080P的手机上, 使用initial-scale = 1,设备像素比(可以通过window.devicePixelRatio 来查看当前的设备像素比)是3 : 1,一个CSS像素表示了9个物理像素。
依据是公式: 1 个 CSS 像素 = (devicePixelRatio)^2 个实际像素

720P的devicePixelRatio为 2

通过使用这种viewport的缩放, 让1080P的手机可以当作360P的手机来解析,720P的手机看做 360P的手机,都能按可接受的大小来展示页面。

4. 相关链接
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值