移动web开发之——viewport
发布在前端小菜鸡的填坑之路2015年11月24日view:2727HTML5前端开发BrettBat移动开发
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

移动web开发之——viewport

在绝大多数移动端的web页面中,head标签里面都会有这样一行代码

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

然而PC端的页面中却不怎么出现。那么这个viewport的作用是什么呢?

viewport根据字面翻译,为视窗,窗口。viewport的宽度决定了html这个标签的宽度。viewport又分为visual viewport(可视窗口)和layout viewport(布局窗口)。

可以想象如下一种场景,你做在电影院的某一排看电影,荧幕的大小肯定是固定的,此时荧幕的大小就相当于layout viewport。你的眼睛的视野范围就可以理解为visual viewport,这个范围取决于你离屏幕的距离,离荧幕越近,你看到的屏幕范围就越小,就看不全,离的越远,你看到的屏幕就更加全。

在PC端时,由于屏幕尺寸一般都比较大,所以浏览器默认viewport为clientWidth,也即是visual viewport=layout viewport=clientWidth。所以当你的html宽度小于clientWidth时,你能看到全部的内容,就如同屏幕刚好占满你的视野。

但是在移动端,比如手机,屏幕的尺寸一般很小,如果默认使得两个viewport值相等的话,那么几乎所有的pc页面都会乱的不成样子。所以手机浏览器中,visual viewport默认为手机屏幕的大小,而layout viewport默认为800px到1000px不等,不同浏览器的初始值不一样。当你用手机打开一个pc端的网页时,按照上面的规则,你只能看到其中的一部分,剩下的部分需要滚动屏幕才能看到。但是许多设备的浏览器为了让用户能看全页面,而选择了最小缩放,也就相当于你离荧屏更远以保证你能看到全部的屏幕。但是在电影院中,毕竟最远距离是有限的,所以这个缩放也是有范围的。当达到最小缩放的时候,如果元素的宽度(px)依然很宽(荧屏是在太大了,最后一排也看不全),那么就会出现横向滚动条(你只能摇脑袋了)。

width为100%的时候:

1

width为2000px的时候:

2

在移动端开发中,一般是不允许出现横向滚动条的,与app相同,而且得保证诸如按钮这样的元素能显示出合适的大小来让用户去触摸。所以得避免layout viewport太宽以及避免浏览器的缩放。这个时候我们就得用到文章开头的那句代码。

width=device-width表示我们将layout viewport的宽度设为跟设备一样宽,以IPHONE6为例,IPHONE6的横向分辨率为750,转换之后所代表的css宽度为375px,这个时候layout viewport的宽度就为375px,也即是html的宽度为375px。一般设计稿也是以375或者750来出图,这样就可以很方便的在设备上实现页面了。

假设在设计稿中有一个宽200px,高70px的按钮,效果如下:

3

如果不设置viewport,则是这个样子的:

4

initial-scale=1, maximum-scale=1是将最大和最小缩放都设置为1,也即是不缩放,并且使用user-scalable=0禁用了用户通过双指缩放。

原文出处:http://www.foreverpx.cn 转载请注明出处。

评论
发表评论
3年前

OneAPM Browser Insight是一个基于真实用户的 Web 前端性能监控平台,实时查看用户请求的性能瓶颈区间,包括请求排队时间、Web应用程序耗时,可以在官网注册体验哦~

4年前

@香菇酱零号_潇 主要是根据layout来缩放是吧,哈哈,明白了,谢谢!

4年前

@米口 是这样,比如你的页面宽度为100%,那么在手机浏览器中的layout viewport就会被默认为800-1000不等(不同手机浏览器不一样),这时候你屏幕很小,为了让你能看全整个网页, 那就得把网页进行缩小,这样你才能看到全部的内容呀。如果你加了viewport并设置为屏幕宽度,那么100%之后,layout viewport就是屏幕宽度了,这样浏览器就不会缩放,你看到的就是原始比例的大小。

4年前

感觉还是不太明白,为什么不加viewport看到的会比较小。还有,加了viewport是不是相当于指定缩放在合适的范围,并且还是会出现横向滚动条的情况

4年前

感觉还是不太明白,为什么不加viewport看到的会比较小。还有,加了viewport是不是相当于指定缩放在合适的范围,并且还是会出现横向滚动条的情况

4年前

感觉还是不太明白,为什么不加viewport看到的会比较小。还有,加了viewport是不是相当于指定缩放在合适的范围,并且还是会出现横向滚动条的情况

WRITTEN BY
PUBLISHED IN
前端小菜鸡的填坑之路

前端小菜鸡的填坑之路

我的收藏