http://www.web008.net

美高梅手机版移步前端第一弹

layout viewport

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

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

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

当然,user-scalable=0,有的人也写成user-scalable=no,都可以的。

viewport简介

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

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

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

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

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

 

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

user-scalable

如果你不想页面被放大或者缩小,通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。

该属性的默认值为yes,即可被缩放(如果使用默认值,该属性可以不定义);当然,如果你的应用不打算让用户拥有缩放权限,可以将该值设置为no

使用方法如下:

XHTML

<meta name="viewport" content="user-scalable=no" />

1
<meta name="viewport" content="user-scalable=no" />

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

maximum-scale

在移动端,你可能会考虑用户浏览不便,然后给予用户放大页面的权利,但同时又希望是在一定范围内的放大,这时就可以使用maximum-scale来进行约束。

maximum-scale用于指定用户能够放大的比例。

举个例子来讲:

XHTML

<meta name="viewport" content="initial-scale=1,maximum-scale=5" />

1
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />

假设页面的默认缩放值initial-scale1,那么用户最终能够将页面放大到这个初始页面大小的5倍。

代码如下:

结语

正如开篇所说,这既不高深也不新奇,它而仅仅是一点观念转变。

当你掌握了viewport,那么意味着你已经大致了解了移动平台与PC平台的不同,你可以更专注而细致的去解决某些平台差异问题。

2 赞 15 收藏 2 评论

美高梅手机版 1

但是为了更好的兼容,我们会使用完整的viewport设置。
代码如下:

前言

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

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

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

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

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的出现

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

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

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。