关于移动端的一些总结

最新推荐文章于 2024-04-17 20:47:11 发布

原创最新推荐文章于 2024-04-17 20:47:11 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#移动端 #html5 #解决方案 #布局 #css3

本文分享了移动Web开发中常见的问题及解决办法，包括点击高亮、视网膜屏适配、position:fixed替代方案、flexbox布局应用、zepto.js事件穿透规避、iOS下动画闪烁消除等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、移动设备点击出现半透明阴影解决方法:-webkit-tap-highlight-color:rgba(0,0,0,0);

2、-webkit-appearance:none 屏蔽输入框怪异的阴影

3、对于视网膜屏的处理方式有两种，一种是background-size;另外一种是background-image:-webkit-image-set(url() 1x,url() 2x);

4、ios下切忌使用position:fixed;

5、移动端布局尽量使用flexbox布局。

6、zepto.js的tap事件穿透问题，如果是有两个表现层，点击上一层的链接或者其他可点击元素，下一层也会跟着触发，目前来说zeptojs的问题还有很多

7、关于ios会用overflow:hidden属性出现卡顿的问题，优化方案是对于他的父级用flexbox，然后针对overflow:hidden的层进行-webkit-transfrom:translate3D(0,0,0);和-webkit-overflow-scrolling:touch;具体的dom会在后续贴出。

8、对于字体的使用尽量用rem处理,后续会给出计算方法

9、使用CSS3动画时页面闪烁的解决方案,-webkit-transfrom:translate3d(0,0,0);-webkit-backface-visibility:hidden;

10、图标使用font-face