# 用户体验

# CSS 属性

# 元素不成为鼠标事件目标

pointer-events: none,设置元素不成为鼠标事件的target

# 滚动回弹效果

-webkit-overflow-scrolling: touch,iOS 上产生滚动回弹效果。

-webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果.MDN

取值如下:

  • auto
    • Use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen.
    • 翻译:使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。 |
  • touch
    • Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. Also creates a new stacking context.
    • 翻译:使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。 |

需要注意的是,对容器添加了-webkit-overflow-scrolling: touch后,可能会存在以下问题:

  • 导致容器内使用position:fixed;固定定位的元素随着页面一起滚动。
  • (iOS UIWebview 里)容器内溢出的内容(比如弹窗)将被隐藏,效果类似于overflow: hidden,google 未找到原因

# 禁用文字选中

user-select属性控制用户能否选中文本。

若想文字不可选中,设置该属性为none

div {
    user-select: none;
}
1
2
3

# 禁用 iOS 长按图片预览

* {
    -webkit-touch-callout: none;
}
1
2
3

详见:MDN - -webkit-touch-callout

# 点击元素不高亮显示

设置-webkit-tap-highlight-color: transparent,点击元素时不高亮显示。

-webkit-tap-highlight-color是一个没有标准化的属性,能够设置点击链接的时候出现的高亮颜色。显示给用户的高光是他们成功点击的标识,以及暗示了他们点击的元素。

div {
    -webkit-tap-highlight-color: transparent;
}
1
2
3

# 类似电话号码的数字不可点击拨号

<head>标签里添加:

<meta name="format-detection" content="telephone=no">
1

# 网页置灰

一般遇到国家公祭日、国难日或者默哀日等情况,都需要将整个页面置灰。这可通过filter: grayscale(1)来实现。

若是想要全站都置灰,直接在文档根元素html上添加滤镜。

html {
  -webkit-filter: grayscale(100%); /* webkit */
  -moz-filter: grayscale(100%); /*firefox*/
  -ms-filter: grayscale(100%); /*ie9*/
  -o-filter: grayscale(100%); /*opera*/
  filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  filter:gray; /*ie9- */
}
1
2
3
4
5
6
7
8
9
10

尤其需要注意的是,若是将这段 CSS 应用到body而不是html上,会导致页面里使用position: fixed/absolute定位的元素,会以body为包含框进行定位(换句话说,就是固定定位可能失效了),其原因是:

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided. -- filter-effects 规格文档

若是不想子孙元素的fix/absolute定位元素以这个添加了filter属性的元素为基准来定位,就需要将filter属性应用到当前文档的根元素即html上。

若是想局部页面置灰,比如某个路由页面,则需要给页面上的元素单独添加filter: grayscale(1),且不要给fixed/absolute的祖先元素添加。

参考文档:

# 其他

# iOS 页面顶部边界下拉出现白色空白

iOS 里,手指按住屏幕下拉,屏幕顶部会多出一块白色区域。手指按住屏幕上拉,底部多出一块白色区域。其原因是,在 iOS 中,手指按住屏幕上下拖动,会触发touchmove事件。这个事件触发的对象是整个 webview 容器,容器自然会被拖动,剩下的部分会成空白。解决方案详见:吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

# 页面的放大和缩小

禁止页面的放大和缩小,添加如下meta

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
1

PS: viewport-fit=cover是解决 iPhone X 刘海适配问题的。

本站总访问量    次