search

wisetc / practice

Practice conclusion
5 stars 0 forks source link

移动端适配的坑 #2

Open wisetc opened 6 years ago

wisetc commented 6 years ago

尺寸

  1. 不要以全屏的思维考虑问题，在微信中，或者safari中，实际的可视范围是很小的。

交互

fixed 定位对滑动的影响

设置了 fixed 定位的元素，如果其尺寸足够大（例如占满整屏），则在该容器元素内部可能会滑不动。例如代码

position: fixed;
overflow-y: scroll;
left: 0;
top: 0;
width: 100%;
height: auto;

上面的代码，当容器（例如列表容器）元素宽度足够大，且高度超出整屏时，将导致在其内部无法滑动，超出屏幕部分则无法阅读。因为其内容在其自身尺寸范围内没有产生溢出。解决办法是设置 fixed 的元素的高度为一个固定的值，例如 100vh。

height: 100vh;
position: fixed;
overflow-y: scroll;
left: 0;
top: 0;
width: 100%;

iso滑动的原生优化

对于iso webapp溢出可滑动区域卡顿的问题，有如下的解法。设置css样式-webkit-overflow-scrolling: touch;，对于mac 上的chrome，该属性值无效。

/*设置 -webkit-overflow-scrolling: touch;*/
.page-body {
  min-height: 1.5rem;
  height: calc(100vh - 1rem);
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

参考https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

transform对内部元素的影响

iscroll利用transform原理来进行移动端的滑动，但是会影响其内部的采用了fixed定位的元素，使其不能永久相对固定于viewport。

iso :active

如果需要为移动端页面中的元素设置 :active 伪元素，那么需要设置元素的onTouchStart设置为空。

请参考，:active pseudo-class doesn't work in mobile safari

On iOS, mouse events are sent so quickly that the down or active state is never received. In other words, setting an ontouchstart event (even if it's empty) is explicitly telling the browser to react to touch events.

sass 颜色函数

例如，将基颜色变浅 10%，可以用 lighten( $base-color, 10% )。

请参考，Controlling color with Sass color functions

wisetc commented 5 years ago

Safari 页面内的底部按钮被工具条遮挡，https://css-tricks.com/the-trick-to-viewport-units-on-mobile/