admin 管理员组

文章数量: 1184232


2024年6月12日发(作者：oracle 库)

北大青鸟前端移动端练习

一、在移动端，单击穿透是什么？

单击穿透现象有3种。

单击穿透问题：单击蒙层（mask）上的“关闭”按钮，蒙层消失

后，发现触发了按钮下面元素的click事件。

页面单击穿透问题：如果按钮下面恰妤是一个有属性的标签，那

么页面就会发生跳转。

跨页面单击穿透问题：这次没有蒙层了，直接单击页内按钮跳转

至新页，然后发现新页面中对应位置元素的click事件被触发了。

有4种解决方案。

（1）只用touch。

这是最简单的解决方案，完美解决单击穿透问题，把页面内所有

click都换成touch事件（touchstart、touched、tap）。

（2）只用click

因为单击会带来300ms的延迟，所以页面内任何一个自定义交互

都将增加300ms的延迟。

（3）轻触〔tap）后延迟350ms再隐藏蒙层。

改动最小，缺点是隐藏蒙层变慢了，350ms还是能感觉到慢的。

（4）添加pointer events:none样式。

这比较麻烦且有缺陷，不建议使用。蒙层隐藏后，给按钮下面的

元素添上pointer events:none样式，让click穿过去，350ms后去

掉这个样式。恢复响应的缺陷是蒙层消失后的350ms内，用户单击按

钮下面的元素没反应，如果用户单击速度很快，一定会发现。

二、如何实现自适应布局？

通过以下几种方式实现。

（1）可以使用媒体查询做响应式页面。

（2）用Bootstrap的栅格系统。

（3）使用弹性盒模型。

三、在移动端（Android、LOS）怎么做好用户体验？

从以下几方面做好用户体验

（1）清晰的视觉纵线。

（2）信息的分组。

（3）极致的减法。

（4）利用选择代替输入。

（5）标签及文字的排布方式。

（6）依靠明文确认密码。

（7）合理地利用键盘。


本文标签： 蒙层 穿透 问题 页面 按钮

版权声明：本文标题：北大青鸟 前端移动端练习 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1718181171a717975.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。