移动前端第一弹
分类:计算机知识

移动前端第一弹:viewport详解

2016/04/19 · CSS · 2 评论 · viewport

原文出处: 杜瑶(@doyoe)   

设置meta中的viewport:防止手机中网页放大和缩小**。

前言

这次想聊聊移动开发相关的事。是的,你没有看错,一句话就可以开始你的移动前端开发。

你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界。

但其实它一点也不新奇,不复杂。

还有就是,有些手机网站我们看到如下声明:

viewport简介

没错,就是viewport特性,一个移动专属的Meta值,用于定义视口的各种行为。

该特性最先由Apple引入,用于解决移动端的页面展示问题,后续被越来越多的厂商跟进。

举个简单的例子来讲为什么会需要它:

我们知道用户大规模使用手机等移动设备来进行网页浏览器,其实得益于智能手持设备的兴起,也就是近几年的事。(还记得不久前的几年,满大街都还是诺基亚的天下么?)

这时有一个很现实的问题摆在了厂商面前,用户并不能很好地通过手机等设备访问网页,因为屏幕太小。

 

代码如下:

layout viewport

Apple也发现了这个问题,并且适时的出现,它提出了一个方案用来解决这个问题。在iOS Safari中定义了一个viewport meta标签,用来创建一个虚拟的布局视口(layout viewport),而这个视口的分辨率接近于PC显示器,Apple将其定义为980px(其他厂商各有不同①)。

这就很好的解决了早期的页面在手机上显示的问题,由于两者之间的宽度趋近,CSS只需要像在PC上那样渲染页面就行,原有的页面结构不会被破坏。

①的描述大致如下,数值不一定持续准确,厂商可能更改,但这个绝对值其实并非特别重要:
iOS, Android基本都是: 980px
BlackBerry: 1024px

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" ";

visual viewport

有了layout viewport,我们还需要一个视口用来承载它,这个视口可以简单的认为是手持设备物理屏幕的可视区域,我们称之为(视觉视口)visual viewport。这是一个比较直观的概念,因为你能看得见你的手机屏幕。

对于visual viewport,开发者一般只需要知道它的存在和概念就行,因为无法对它进行任何设置或者修改。很明显,visual viewport的尺寸不会是一个固定的值,甚至每款设备都可能不同。大致列几种常见设备的visual viewport尺寸:

  • iPhone4~iPhone5S: 320*480px
  • iPhone6~iPhone6S: 375*627px
  • iPhone6 Plus~iPhone6S Plus: 414*736px

iPhone4S为例,会在其320px②的visual viewport上,创建一个宽980pxlayout viewport,于是用户可以在visual viewport中拖动或者缩放网页,来获得良好的浏览效果;布局视口用来配合CSS渲染布局,当我们定义一个容器的宽度为100%时,这个容器的实际宽度是980px而不是320px,通过这种方式大部分网页就能以缩放的形式正常显示在手机屏幕上了。

②的描述大致如下:
早期移动前端开发工程师常能见到宽640px的设计稿,原因就是UI工程师以物理屏幕宽度为320px的iPhone4-iPhone5S作为参照设计;
当然,现在你还可能会见到750px和1242px尺寸的设计稿,原因当然是iPhone6的出现

当然,为了更好的适配移动端或者只为移动端设计的应用,单有布局视口和视觉视口还是不够的。

设置了DTD的方式是XHTML的写法,假如我们页面运用的是html5,可以不用设置DTD,直接声明<!DOCTYPE html>。
  视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用meta标签,name="viewport"来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。
  在移动端用来承载网页的这个区域,就是我们的视觉窗口,viewport(视口),这个区域可以设置高度宽度,可以按比例放大缩小,而且能设置是否允许用户自行缩放。
参数说明:
width:宽度设置的是viewport宽度,可以设置device-width特殊值
initial-scale:初始缩放比,大于0的数字
maximum-scale:最大缩放比
minimum-scale:最小缩放比
user-scalable:用户是否可以缩放,yes或no(1或0)

ideal viewport

我们还需要一个视口,它类似于布局视口,但宽度和视觉视口相同,这就是完美视口(ideal viewport)。

有了完美视口,用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口也是通过viewport meta的某种设置来达到。

说了这么一大堆的东西,貌似都和viewport有关联,那么viewport到底怎么搞,请继续往下。

关于3个视口,PPK已经做了非常棒的阐释,你也可以在StackOverflow上找到一些对此描述的相互补充,例如:[1], [2],有兴趣的童鞋也可以看看

设置方法如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

viewport特性

通常情况下,viewport有以下6种设置。当然厂商可能会增加一些特定的设置,比如iOS Safari7.1增加了一种在网页加载时隐藏地址栏与导航栏的设置:minimal-ui,不过随后又将之移除了。

Name Value Description
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

使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:移动前端第一弹

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文