移动端开发学习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深入理解

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

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

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

移动端开发之viewport、fiddler

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

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

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

移动前端开发之viewport的深入理解

首先如果不设置meta viewport标签,那么移动设备上浏览器默认的宽度值为800px,980px,1024px等这些,总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px,它跟代表...

移动前端开发之viewport的深入理解(转)

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或...
  • J_cow
  • J_cow
  • 2015-03-25 21:37
  • 324

移动web开发之——viewport

在绝大多数移动端的web页面中,head标签里面都会有这样一行代码然而PC端的页面中却不怎么出现。那么这个viewport的作用是什么呢?viewport根据字面翻译,为视窗,窗口。viewpor

移动前端开发之viewport的深入理解

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

viewport使用-适用移动端屏幕的问题

随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕...

移动端viewport的作用

做移动端web开发,机型的兼容性是较大的问题,而移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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