移动端开发学习1:viewport

原创 2015年11月19日 00:41:05

前言

时间: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. 相关链接

版权声明:本文为博主原创文章,未经博主允许不得转载。

移动端开发-viewport实现响应式设计

1. 不使用viewport出现的问题提到响应式设计,大家首先想到的可能是 Bootstrap , @media 。前者是一个响应式UI库,风格比较扁平化,类似的还有雅虎的Pure。@media是CS...
  • qiqingjin
  • qiqingjin
  • 2016年05月30日 17:22
  • 1647

HTML5+CSS3移动端开发_viewport参数设置

width:viewport宽度,通常设置device-width; inital-scale:初始化缩放比,大于0的数字; maximum-scale:最大缩放比; minimum-scale...
  • LiJi19910313
  • LiJi19910313
  • 2016年11月14日 21:52
  • 434

web移动端开发(2)-viewport

width [pixel_value | device-width] width 直接去设置具体数值大部分的安卓手机不支持的 但是IOS支持 user-scalable 是否允许缩放 (no||ye...
  • dlwin
  • dlwin
  • 2014年11月06日 10:55
  • 241

移动端开发之viewport、fiddler

因为之前做的开发都是针对PC端的,突然同学让我帮他写一个'个人简介'的页面,要求自适应移动端,写完之后我发现,在pc上的效果还行,结果到了手机上,一个词形容"惨不忍睹",所以赶紧去找资料,进行兼容处理...
  • qq_20291283
  • qq_20291283
  • 2015年08月02日 20:28
  • 214

深入理解移动端像素知识与Viewport知识

在做移动端网页开发时,首先要搞清楚三种viewport和三种像素,只有明白了这些概念,才能更好地开发出适配不同分辨率设备的网页。 但参阅的博客越多,对这些概念越是混乱,同样的一个概念,在一篇博客...
  • aiolos1111
  • aiolos1111
  • 2016年07月20日 18:04
  • 8759

移动端开发之viewport深入理解

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或...
  • yzzane
  • yzzane
  • 2017年04月28日 00:13
  • 190

移动端开发之viewport的理解

一、viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分...
  • qyaroon
  • qyaroon
  • 2016年04月21日 16:54
  • 482

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale

content属性值详解: width:可视区域的宽度,值可为数字或关键词device-width height:同width initial-scale:页面首次被显示是可视区域的缩放级别,取...
  • coldh
  • coldh
  • 2015年08月21日 09:14
  • 504

移动客户端开发快速上手ReactNative的学习路线

1. HTML(学习时间30分钟): 或多或少,大家肯定对HTML还是有所了解的,在开始前端之旅前,有必要系统的扫一下基础,推荐教程:http://www.jb51.net/shouce/htm...
  • JoeySheng
  • JoeySheng
  • 2016年07月15日 15:24
  • 1465

分析<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable

width:可视区域的宽度,值可为数字或关键词device-width。 height:同width。 intial-scale:页面首次被显示时可视区域的缩放级别,取值1.0则页面按实际尺寸...
  • salestina
  • salestina
  • 2016年09月30日 09:29
  • 593
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动端开发学习1:viewport
举报原因:
原因补充:

(最多只允许输入30个字)