Warning:
This wiki has been archived and is now read-only.
Proposals/inspect zoom
From HTML5 Chinese Interest Group Wiki
Contents
問題敘述 & 使用情節
- 有时，因用户调整页面的缩放比例,导致某些布局,显示内容或功能不正常. 此时,我们想要做到兼容.就需要获知用户更改页面缩放比例. 并且需要知道这个比例的值.
- 典型例子 : fixed元素在页面上,总是相对一个位置.而缩放后,内容节点则可能会被fixed元素所覆盖.(虽然这个可以借助resize + clientWidth等方式解决.但该方法并不适用特殊情况)
當前作法
作法一
IE,Firefox下借助screen.width 和screen.height的变化，获取缩放比的变化.
缺点
- 浏览器支持不够(Chrome,Safari,Opera的screen.width,screen.height,不随缩放比例变化而变化.)
- 如果用户进入页面时,已经对页面进行过缩放操作.则记录的原始比作为参考值.会导致缩放比例获取不正确.
- 要借助定时器,实时扫描. 或 window.onresize.
作法二
借助flash + window.onresize ，通过舞台尺寸来判断缩放比例.
缺点
- 5%的PC用户不支持flash. IOS完全不支持flash,android等用户的flash安装量也很低.
- JS - flash 通讯的成本.
- flash 需要足够尺寸才能精确检测缩小的情况. 就需要一些技巧来解决,很不方便.
提案
实现下面扩展接口. (以下为新增):
partial interface Document {
// DOM tree accessors
readonly attribute float zoom;
// event handler IDL attributes
[TreatNonCallableAsNull] attribute Function? onzoomchange;
};
注：zoom 应该是一个 大于0的 的浮点数,用来表示当前页面的缩放比例. 比如 0.5 , 1.1 , 3
注：onzoomchange 是一个简单事件.在页面或某元素缩放比例发生变化时触发
相关事件对象ZoomChangeEvent:
interface ZoomChangeEvent: UIEvent {
readonly attribute usort behavior ;
readonly attribute float zoom;
};
| Type | zoomchange |
|---|---|
| Interface | ZoomChangeEvent |
| SYNC/ASYNC | SYNC |
| Bubbles | YES |
| Target | Document,Element |
| Cancelable | NO(条件性YES,如非用户主动触发的缩放,则可以被取消) |
| Default action | None |
| Context info | Event.target : Document , Element UIEvent.view : defaultView UIEvent.detail : 当前放大或缩小的倍数.如,原来是1,现在为1.5,则该值为0.5 ChangeEvent.behavior : ENUM_ZOOMOUT || ENUM_ZOOMIN,分别对应1和0 ChangeEvent.zoom : 当前缩放比例,参考webIDL中新增的document.zoom |
注：:该事件的 isTrusted 应该对应 是否是用户缩放,还是类似webkit引擎的 element.style.zoom的的改变而触发. 即用户行为则为信任.其他为非信任.
最后的补充: 我没有对ZoomChangeEvent 定义 init 的方法.是因为,我自己没有想好,这样做是否有必要. 因为可以借助style.zoom 去修改某元素的缩放.