微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

什么是虚拟视窗(virtual viewport)

2015-04-19 20:01 前端大全
(点击 上方蓝字 ,可快速关注我们)

尽管谷歌新推出的移动浏览器Chrome M40在视窗上做的改变非常微小,但这对用户来说却大有不同。


在启动移动浏览器时,不加视窗元标签的情况下,浏览器的网页大小默认为屏幕实际大小的980px左右,并在此基础上进行渲染。而加上视窗元标签的话,开发人员可以自定义网页宽度,通常设置为“设备宽度”,就是让页面大小自适应于设备的屏幕宽度。详见learn more on Web Fundamentals。


Rick Byers这样描述虚拟视窗:虚拟视窗就是将“视窗”概念分割成两部分,一个是“布局视窗(layout viewpor)”(在这里,所有的内容都处于固定的位置上),另一个是“虚拟视窗(visual viewport)”(用户实际看见的部分)。


超级简单的例子


Vediojs.com这个网站就是个很好的例子,导航栏固定在顶部,并且在其左右两侧都有相关链接。


下面的两排图片对比展示了,对页面进行放大和左右移动时,在两种版本的移动浏览器上分别会发生什么。


上面一排手机用的是Chrome M39,这个版本没有虚拟视窗功能,而底下的三个界面来自拥有虚拟视窗的Chrome M40。




在Chrome M39中,你放大界面后还能看到导航栏,但是往右挪就看不到导航栏右侧的链接,只能看到网站的logo。


在这点上Chrome M40(拥有“虚拟视窗”)就不一样了,你可以看到“虚拟视窗”在“布局视窗”中滚动所有内容,这样就能在左右滑动时看到导航栏上右侧的链接。


IE浏览器已经拥有此项功能,这些改进让我们的浏览器在功能上和他们的更加贴近。


html { overflow: hidden; }


这给开发人员带来的最主要变化是:在M39中,将overflow属性值设置为hidden后页面仍然能够滚动,但是在M40中,这样做不再有效。


更多有用信息


你想了解的更多?


那么,你可以观看下面的幻灯片(幻灯片需要翻墙才能查看)或者点击Rick’s Google+ Post,他在这方面可比我功夫深,你能真正了解到你想知道的。



原文出处:updates.html5rocks.com

译文出处:伯乐在线 - 柒柒

链接:http://web.jobbole.com/82298/




1.『前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯,相关职位。欢迎关注。


微信号:FrontDev

(长按上图,弹出“识别二维码”后可快速关注)




 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 Android内存优化杂谈 一分钟了解mongodb 携程无线新旅程 【年度案例】大数据盘点之Spark篇 Google 昨晚发布的这些 App,让我们提前看到未来