关闭

移动端开发学习1:viewport

标签: 前端开发移动端开发
384人阅读 评论(0) 收藏 举报
分类:

前言

时间: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-scale 0.0 - 10.0 定义初始加载时设备宽度与viewport的缩放比
maximum-scale 0.0 - 10.0 定义用户允许的最大缩放比
minimum-scale 0.0 - 10.0 定义用户允许的最大缩放比
user-scale yes / 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. 相关链接

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5072次
    • 积分:111
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档