上一篇重点讲解了桌面端, 移动端最大的问题就是 屏幕比较窄, 如果照搬桌面端的布局. 那么体验会很不好.
The two viewports
为了解决窗口过窄的问题, 需要将 布局窗口 变宽. 这样就有了2个 viewport. 一个是css布局窗口(layout viewport), 一个是 视觉 窗口(visual viewport).
stackoverflow 上有一些解释, 这里是链接 George Cummins explains the basic concept best here at Stack Overflow , See also this explanation by Chris
想象 你有一个 大小形状不改变的 大画布. 你可以透过 一个 小框框 看见这个画布的内容(框框以外的地方无法看见,就像管中窥豹一样)
当 小框框 远离 画布的时候, 你就可以看到更多的内容 . (此时就是 zoom out: 缩小了).
当 小框框 靠近 画布的时候, 你就可以看到较少的内容 . (此时就是 zoom in: 放大了).
你当然可以改变 小框框的 方向 , 但大画布的 大小形状没法改变. 用户可以通过缩放, 滚动或改变框框大小来 看到画布的不同部分.
我们的 写css布局都是 依赖于 布局视口(layout viewport) 也就是 我们在 大画布上 "作图". 问题是 大画布比 小框框 大的多.
How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.
当然这只是大致的说法: 有写设备有特殊的处理方法,尤其是 android机器.
塞班 的是 布局视口=视觉视口. 如果是因为绝对宽度导致难以融入视觉视口, 那么布局视口最多延伸至 850px
三星 自主系统 bada上的 webkit 是 布局视口 =最宽的那个元素
黑莓 布局视口=视觉视口,并且不会改变
视觉视口 和 布局视口, 都是 基于css像素. 如果我们把 手机端页面缩放,视觉视口会跟着 改变. 但是 布局视口 不变
(If they didn’t your page would constantly reflow as percentual widths are recalculated.)
android webview 有一个中要设置 :
mwebview.getSettings().setUseWideViewPort(true);
当他 设置为 false时, layoutviewport 的 尺寸总是 webview的控件的尺寸.(in css 像素)
得出的值 跟设置的dp宽度是一样的. 看来 dp这个单位是跟 css像素是一个道理.
如果设置为 true, layoutviewport 的 尺寸使用的是 <meta>标签指定的尺寸, 如果没指定尺寸, 那么就是一个更加 宽的值. 我的华为p6 是 980px(跟ios的一样)
此时更改 webview的 大小, layoutviewport 尺寸是不会变得. 但 visualviewport 会跟着 改变.
测量 layout viewport 我们同样 用 document.documnetElemnet.clientWidth
测量 visual viewport 用 window.innerWidth , 显然用户缩放时, 这个值会变化( 上面2 布局都是基于css像素的).
我进行了测试: 我把 webview 设为 200dp x 400dp
如果设置为 false, layoutviewport,visualviewport 都是 200X400. webview尺寸的改变他们的值会跟着改变
如果设为 true(当然我没有指定 meta标签) visualviewport 仍是 200X400. layoutviewport变成了 980 X 1960 (华为p6), 如果我把 webview的尺寸
改成 210x410, visualviewport 是 210X410, layoutviewport变成了 980 X 19xx, (它的高度一直在变, 规则还没弄清楚,不过我们基本也只关心宽度)
其他诸如 pageX/Y 等和桌面端一样, 并没有变化. 依然是相对于 page,也就是 <html>/ 布局视口
clientX 是 visualviewport
而 screenX 还是 相对于屏幕 in设备像素
媒体查询 mediaqueries width/height
使用 布局视口 in css像素, device-width/height
mirrors the values ofscreen.width/height使用设备像素
实际上 媒体查询在 手机端没什么用, 由于布局视口允许改变使用 width区分没什么用个, 而使用 device-width 又难以区分数万种 设备(尤其是 android), 他仅仅在区分
平板, 手机, 电脑 这方面有些用
下一篇文章 我们会叙述一下 meta viewport 标签.