美文网首页
webkit 之 fast-tap 以及 viewport 缩放

webkit 之 fast-tap 以及 viewport 缩放

作者: 472abb2e4941 | 来源:发表于2018-03-28 22:34 被阅读78次

总所周知,用户在 tap 后,可能会进行第二次的 tap,浏览器在等待第二次的 tap 是否会发生,从而判断这是一个单击事件还是双击事件,做相应的处理,这就是 tap 事件会延迟的原因。双击的定义是不超过 350 ms 的两次点击,这也是为什么 tap 事件的延迟恰好是300 ms左右。虽然只有300ms,但多多少少会影响体验,github 上有 fastClick 的库专门解决这个问题,本人没有用过,但是大概猜到可能是使用 touch 事件去处理 tap 。浏览器是在不断发展的,针对这个问题早在15 年 webkit 就提出过解决方式,随着 ios 10 的发布又做了细微的调整,具体如下:

如果你听说过使用 user-scalable=no 或者把 minimum-scalemaximum-scale 设置成相同的值开启 fast-tap 的方法,但是 ios 10 开始也许行不通了。

fast-tap 自动生效

在 ios 10 以及以上 safari 开启 fast-tap 必须满足下面的条件

  • 必须 包含 viewport 的 meta 标签
  • viewport 必须 定义成 width=device-width
  • 内容的 scale 值是 1, 这意味着:
    1. 没有手动放大页面,(可以放大,但是最终要回到初始的 scale)
    2. 页面不会太宽,这样浏览器不会压缩去显示

使用样式使得 fast-tap 生效

如果网页不能满足上述条件,你还可以手动的使得 fast-tap 生效。 css 中有个属性 touch-action,默认值为 auto, 这意味着 Webkit 会在元素上接受一些手势,比如 panning、 pinching 以及 double-tapping。但在一个可点击的元素把 touch-action 设置成 manipulation ,这会让 Webkit 认为在这些元素上的点击仅仅只是用来 panning、pinching, 这意味着 Webkit 不会认为 double-tap 会发生在这些元素上,所以可以立即触发单次的 tap。任何元素如果它的祖先元素设置了 touch-action: manipulation 都可以让它单次 tap 触发变快。

补充说明的是,如果一个元素拥有 touch-action: manipulation ,那在任何 zoom scale 的情况下,fast-tap 都会有效。而使用 device-width 自动开启时,仅当 viewport 在 initial scale 才有效。

ignoresViewportScaleLimits 禁止缩放

你也许听说过可以使用 user-scalable=no 或者把 minimum-scalemaximum-scale 设置成相同的值开启 fast-tap,这个在 ios 10 开始不一定行的通了,准确说在 safari 里面做不到。

因为这样做会使得用户不能放大缩小页面,而 webkit 本意是不建议禁止缩放功能的,因为当文字太小时候,如果不给用户一个放大文字的操作是不友好的。而之所以可能出现文字太小是因为有太多尺寸太多不同 ratio 的屏幕,在设计上使用一个适合全部设备的文字尺寸是非常困难的。

在 WKWebViewConfiguration 上有个新的 api 叫 ignoresViewportScaleLimits。这个属性默认是 false ,表现和没有这个 api 的老版本的 webview 保持一致,即不会阻止用户禁用缩放。

但是 ios 10 的 safari 设置成了 true,即禁止用户限制缩放功能。这意味着 user-scalable=no 或者把 minimum-scalemaximum-scale 设置成相同的值是没有办法禁止掉缩放。

但是在微信浏览器里面,笔者用 demo 页发现,微信浏览器没有刻意去改变 ignoresViewportScaleLimits 的默认值,所以微信里面可以禁止用户使用手势进行缩放。

写在最后的总结,就是在 ios 10 起 safari 里面仅仅只能用 viewport 'width=device-width' 或者 css 开启 fast-tap,但是在其他的 web 容器里面(比如微信),如果 ignoresViewportScaleLimits 设置为 false,你还可以使用禁止缩放 viewport 来开启。

参考 :https://webkit.org/blog/5610/more-responsive-tapping-on-ios/ ,
https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/

相关文章

  • webkit 之 fast-tap 以及 viewport 缩放

    总所周知,用户在 tap 后,可能会进行第二次的 tap,浏览器在等待第二次的 tap 是否会发生,从而判断这是一...

  • 页面架构——响应式布局

    viewport 把viewport设置成设备宽度,缩放1.0,防止用户手动缩放 @media媒体查询 @medi...

  • bootstrap3 1. meta viewpoint

    viewport:视口 user-scalable=no:可以禁用其缩放(zooming)功能。这样禁用缩放功能后...

  • 移动端适配

    1、根据dpr设置viewport 根据js动态设置viewport的缩放比,从而达到设备独立像素等于物理像素 2...

  • android webview 输入框选中文本 页面放大问题

    系统webview嵌套网页,要求是不能缩放。 webview的缩放设置都关闭了,网页js端也写了viewport参...

  • 响应式web设计技巧

    iOS和android浏览器都是基于Webkit核心,chrome/opera都支持viewport meta元素...

  • css之zoom

    zoom CSS 属性会根据 @viewport 来初始化一个缩放因数。 当设置1.0 或 100%时表示不缩放。...

  • 移动端网页html重构

    viewport 设置视窗宽为设备宽度,默认不缩放,不允许用户缩放。 忽略电话号码和邮箱识别 全屏模式 在iOS中...

  • PC版网页手机不缩放

    PC版网页手机不缩放一个mate解决 meta(name="viewport",content="width=16...

  • 移动端适配

    meta viewport 在head中加上 宽度等于设备宽度,initial-scale表示初始缩放比例,max...

网友评论

      本文标题:webkit 之 fast-tap 以及 viewport 缩放

      本文链接:https://www.haomeiwen.com/subject/yyiycftx.html