HTML-HTML5+CSS3权威指南阅读(五、深入理解viewport)

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

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

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 有网页的所有内容,他可以全部或者部分展示给用户。

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

那么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)

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

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

screen.width/height

5. Scrolling offset

我们有时候要知道visual viewport与layout viewport的相对距离 :

window.pageXOffset window.pageYOffset

6.Media queries

Media queries 是html5的特性 可以根据 device-width(设备的宽度 screen.width) 来确定显示不同CSS。

我在IPHONE4S – CHROME 浏览器 ,测试结果如下:


1

2

3

1. visual viewport 宽度 : 默认980 实际大小与缩放比例相关,可以通过meta的viewport属性修改

2. layout viewport 宽度 : 980

3. screen.width         :320

可见IPHONE4S 在做响应设计的时候 ,width应该是320px。

你也可以在 http://zhaoyuhao.com/demo/35.html 测试你设备的情况

7.Meta viewport

最后,我们讨论下 <meta name=”viewport” content=”width=device-width”> 还记得之前窗户和壁画的例子么?设置viewport就相当于放大和缩小房间,找到合适的像素给用户最好的体验。

我们一步步分析:

1.假设你有个简单的页面,不给里面的DIV设置宽度,默认是相对于 layout viewport 的 100%。对于iphone4S而言,这个宽度的数值是980,所以显示出来的效果是这样

2.用户通过放大网页比率,缩小visual viewport的值,相对的用户就能看清楚DIV里的内容,但是layout viewport并没有变,所以会出现下边的效果,部分文档显示在了浏览器外边,需要通过滚动条查看全部文档

3.所以为了解决这个问题,引入了viewport标签。当你看到 <meta name=”viewport” content=”width=device-width”> 说明这个网页把layout viewport的像素设置成了设备的像素,这样实现了 visual viewport = layout viewport = screen.width的最佳体验。

8.小结

文中viewport的介绍不确定是所有浏览器产商实现浏览器的原理,但是对于wap开发人员而言很有帮助。

转自:http://blog.jobbole.com/44903/

时间: 2024-10-13 20:14:02

HTML-HTML5+CSS3权威指南阅读(五、深入理解viewport)的相关文章

html5+css3 权威指南阅读笔记(三)---表单及其他新增和改良元素

一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </form> <textarea form = testForm></textarea> 2.表单内元素的formaction属性 <form id="testForm" action="test.jsp"> <input t

HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)

在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似的讨论做个铺垫.大部分开发者凭直觉已经明白了大部分桌面浏览器中的概念.在移动端我们将会接触到相同的概念,但是会更加复杂,所以对大家已经知道的术语做个提前的讨论将会对你理解移动浏览器产生巨大的帮助. 概念:设备像素和CSS像素 你需要明白的第一个概念是CSS像素,以及它和设备像素的区别. 设备像素是我们直觉上觉

HTML-HTML5+CSS3权威指南阅读(一)

一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2). HTML5 中为 <!DOCTYPE html> 2.指定字符编码 1). HTML4 中为 <

HTML-HTML5+CSS3权威指南阅读(三、CSS3)

1.display 中 block, inline, inline-block 的区别 1).默认情况下, block 宽度占满整个浏览器, inline 宽度等于其内容的宽度 2).每行只容纳一个 block 元素, 但可以并列容纳多个 inline 元素 3).block 元素宽.高.行高等可以更改, inline 元素宽.高.行高等不可更改 4).应用 inline-block 的元素呈现为内联对象, 周围元素保持在同一行, 但可以设置宽度和高度地块元素的属性(这样可以使用 li + in

HTML-HTML5+CSS3权威指南阅读(四、媒体查询)

1.媒体类型 HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性, 扩展了媒体类型的功能; 2.媒体特性检测媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成, 媒体查询中可用于检测的媒体特性有width.height和color(等), 使用媒体查询, 可以在不改变页面内容的情况下, 为特定的一些输出设备定制

《HTML5与CSS3权威指南》知识整理(1)

<HTML5与CSS3权威指南>知识点整理(1) 1.新增标签 新增语义化标签. <header> 定义 section 或 page 的页眉. <nav>定义导航链接. <footer> 定义 section 或 page 的页脚 <section> 定义 section. <article> 定义文章. <aside> 定义页面内容之外的内容. 下面用一个图示来说明其用法. 语义化标签的好处: 1.对搜索引擎友好,有利

HTML5与CSS3权威指南.pdf9

第21章 Media Queries相关样式 该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media 设备类型 and (设备特性) {样式代码} 大部分设备特性的指定值接受min/max的前缀,表示大于等于或小于等于的逻辑 使用and关键字来指定某种设备类型的某些特性满足某个条件时使用的样式,下列表示设备窗口小于640px时所使用的样式 @media screen and (max-width:

HTML5与CSS3权威指南.pdf7

第14章 使用选择器在页面中插入内容 使用选择器来插入文字图片 上一章提到过使用before和after伪类为某个元素之前或之后插入内容 h2:after{content:'12345'},也可以指定个别元素不进行插入h2.class1:after{content:none},也可以插入图片h2:after{content:url(test.png)},将alt属性的值作为图像的标题显示h2:after{content:attr(alt)} 使用content属性来插入项目编号 h2:after

HTML5与CSS3权威指南.pdf6

第11章 获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性 取得当前地理位置 void getCurrentPosition(onSuccess,onError,options); 第一个参数为获取成功执行的回调函数,第二个为失败时执行的回调函数,第三个为一些可选属性的列表(第二个和第三个可选) navigator.geolocation.getCurrentPosition(function(position){ //获取成功时的处理(参数