关于viewport的一些故事---移动端

最新推荐文章于 2018-04-04 13:39:48 发布

伟大的飞哥

最新推荐文章于 2018-04-04 13:39:48 发布

阅读量318

点赞数

分类专栏： html--疑难积累

3 篇文章 0 订阅

订阅专栏

上一篇重点讲解了桌面端, 移动端最大的问题就是屏幕比较窄, 如果照搬桌面端的布局. 那么体验会很不好.

为了解决窗口过窄的问题, 需要将布局窗口变宽. 这样就有了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 标签.

关注

专栏目录