移动端开发常见知识点总结-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_58225312/article/details/120905539

这篇博客详细记录了移动端开发中的重要知识点，包括meta标签、图片处理、滚动条去除、按钮样式、placeholder样式修改等。还介绍了CSS3动画、GPU加速、弹性盒子布局、iOS输入框处理、禁止文字选中等问题，以及JavaScript中的touch事件、音频播放、点击事件优化等。此外，还涉及了微信浏览器的特定问题，如iframe加载限制和预览图片的性能问题。

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

最近又做到了移动端，怕自己忘记移动端的知识点，所以选用博客记载下，方便自己或他人查看

1.meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 自适应
<meta content="yes" name="apple-mobile-web-app-capable"> IOS中safari允许全屏浏览
<meta content="black" name="apple-mobile-web-app-status-bar-style"> IOS中Safari顶端状态条样式
<meta content="telephone=no" name="format-detection"> 忽略将数字变为电话号码
<meta content="email=no" name="format-detection"> 忽略识别email

2.图片尺寸做全屏显示的图片时，尺寸为640*960

3.去除webkit的滚动条

element::-webkit-scrollbar{
display: none;
}

如果要去除全部的，就把 element去掉同时这个属性可让在 div里的滚动如丝般顺滑：

-webkit-overflow-scrolling : touch;

4.去除button在ios上默认样式

-webkit-appearance: none;
border-radius: 0

5.placeholder元素样式的修改

input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}

6.不想让按钮 touch时有蓝色的边框或半透明灰色遮罩（根据系统而定）

 -webkit-tap-highlight-color:rgba(0,0,0,0);

7.在移动端做动画效果的话，如果通过改变绝对定位的 top，或者 margin的话做出来的效果很差，很不流畅，而使用 css3的 transition、 transform或者 animation的效果将会非常棒（这一方面 IOS比 android又要好不少）。如果用 **3d（translate3d）来实现动画，会开启 GPU加速，动画会更加流畅，但硬件配置差的安卓用起来会耗很多性能

8.使用图片时，会发现图片下总是有大概 4px的空白，（原因据说图片是inline，触发baseline什么的。。。）常用解决方法有

img{display:block}；
img{vertical-align:top}<