快捷搜索:
来自 新京葡娱乐场网址 2019-08-25 13:21 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

第二部分

两个viewport的故事(第二部分)

2013/08/05 · CSS · CSS

原文出处: quirksmode   译文出处:Zhao Yuhao   

【感谢@千叶_V 的翻译投稿。如果其他朋友也有不错的原创或译文,可以尝试推荐给伯乐在线。】

在 @伯乐在线官方微博 看到这篇文章的第一部分,信息量很大。看完之后,对wap网站开发和响应式设计有更深入的认知,可惜伯乐在线迟迟没有发布第二部分的译文,于是我试着翻译一部分,顺便整理下思路。

背景

当我们比较移动浏览器和桌面浏览器的时候,它们最显而易见的不同就是屏幕尺寸。

为桌面浏览器所设计的网站在移动浏览器中显示的内容明显要少于在桌面浏览器中显示的;不管是对其进行缩放直到文字小得无法阅读,还是在屏幕中以合适的尺寸只显示站点中的一小部分内容。

于是,有了两个视口(layout viewport 和 visual viewport)的概念。

1.手机浏览器与桌面浏览器的不同

现在手机浏览器的显示分辨率与桌面浏览器差不多,但是手机的尺寸比电脑要小很多。一个没做过响应式处理的网站,在手机和电脑上显示完全一样的内容,不可避免的会出现字体被缩小的现象。想象一下电脑里12号字体缩小好几倍的效果吧。 所以如果将web网页移植为wap应用上,还是有许多问题需要考虑。

两个视口

把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架,你通过它来看这张大图。这个小框架的周围被不透明的材料所环绕,这掩盖了你所有的视线,只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是visual viewport。当你保持框架(缩小)来看整个图片的时候,你可以不用管大图,或者你可以靠近一些(放大)只看局部。你也可以改变框架的方向,但是大图(layout viewport)的大小和形状永远不会变。

<html>元素在初始情况下使用的是 layout viewport的宽度。它的宽度有多宽?每个浏览器都不一样。Safari iPhone为980px,Opera为850px,Android WebKit为800px,最后IE为974px。

缩放的操作是改变visual viewport的尺寸,layout viewport的尺寸不变。两个viewport都是以CSS像素度量的。

2.理解两个viewport的概念

做过wap开发的都知道 html的 <meta name=”viewport”> ,这是一个从iphone引入的meta,现在几乎所有手机浏览器都支持。下边要讲的 viewport 是从手机浏览器的角度出发,而不是html,请不要混淆。

把 viewport 分为2个方面来学习,更有助于理解它的原理:

  • visual viewport
  • layout viewport

想象有个房间,你可以操控它放大变小,现在你站在它的窗户前。正对着窗户的墙壁涂满了壁画,你走到离窗口1米的位置往房间里看,假设房间现在很大很大,你能看到对面墙壁上的整个壁画,但是因为距离太远了,你看不清壁画上的题词,于是你让房间缩小,缩小到壁画离你很近,近到能看清壁画上的细节。在这里 窗户就是 visual viewport。墙壁就是 layout viewport

对应到手机浏览器,visual viewport就是当前显示给用户内容的窗口,你可以拖动或者放大缩小网页,来看清楚网页的内容。layout viewport 有网页的所有内容,他可以全部或者部分展示给用户。

图片 1

图片 2

对于css布局,特别是用宽度百分比做排版的时候,比率是按照layout viewport 来计算的。也就是说如果一个div相对的宽度50%,用户在手机浏览器放大缩小,DIV的宽度不会一直显示相对于窗口50%,这个div可能会填满整个窗口或小到看不见。(可以电脑和手机分别体验一下这个网址:)

那么layout viewport有多宽?不同的设备、不同的浏览器都不相同。 Safari浏览器为980px,Opera 850px,Android WebKit 800px, IE 974px.(手机像素宽度、浏览器像素、设备像素是不同的概念,这个需要注意.)

原文对于这两者还有一些其他的分析,不过不是什么重点,就不翻了

度量

3.viewport 长宽的测量

上文提到有2个viewport,分别有2对属性值对应这两者。(这里有个故事,按道理桌面浏览器是只需要一个属性对的,可是由于浏览器大战导致出现了不同标准,刚好手机浏览器用上了,也算是一种应祸得福吧。)

layout viewport 的 长宽 (document.documentElement.clientWidth / document.documentElement.clientHeight)

visual viewport 的 长宽 (window.innerWidth / window.innerHeight)

layout viewport

document.documentElement.clientWidth/Height

4.screen(设备) 长宽的测量

screen 的大小其实就是设备的像素大小,在针对桌面浏览器的开发中,这个数值不重要,你不需要关系电脑屏幕的像素,但是对于wap开发,这个数值有它的含义,因为手机浏览器宽度=设备宽度,可以通过他们的比例计算到页面的缩放比例

screen.width/height

visual viewport

window.innerWidth/Height

完全支持:ios,Symbian,BlackBerry

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:第二部分

关键词: