移动前端开发经验总结
时间：2023-03-31 02:03:37
CSS
一、概述本文档针对移动前端开发，包括Hybrid和非原生应用中的网页。2.适用于所有体验适用于：iOS6.0+,Android4.0+3.总结<1>css伪类：active如果你想使用元素的伪类实现激活状态，那么你需要知道以下几个问题：在iOS上几乎所有的浏览器中，定义元素的伪类：active是无效的；在Android上，AndroidBrowser和Chrome都支持伪类:active，其他一些第三方浏览器不支持；:active被定义且当前浏览器设备环境支持，当手指滚动或无意滑动时，:active状态将被激活；为了避免以上所有问题，如果需要按active状态，建议使用js新增一个className<2>清除输入框ShadowiOS上几乎所有的浏览器输入框（input，textarea）默认有一个内部阴影，但不能使用box-shadow清除它。如果不需要阴影，可以这样关闭：input,textarea{/*方法一：去除边框*/border:0;/*方法二：边框颜色透明*/border-color:transparent;/*方法三：重置输入框的默认外观*/-webkit-appearance:none;appearance:none;<3>circleCornerBug手机在AndroidBrowser4.4.2（其他版本未测试），如果使用border-radius，并使用-webkit-transform属性，当使用translatez或translate3d值，会有圆角的问题：.test{border:2pxsolidred;宽度：50px；高度：50px；边界半径：50%；背景色：灰色；盒子阴影：02px5pxrgba(0,0,0,.3);:翻译(0,0)翻译(0);转换：翻译（0，0）翻译（0）；}<divclass="test">
如上代码，-webkit-transform:translate(0,0)translatez(0)会导致圆角无法包裹background-color当然，-webkit-transform:translate3d(0,0,0)也是一样的，所以如果你的某个场景是这样的，可以直接使用-webkit-transform:translate(0,0)来避免这个问题<4>的边框圆角导致背景溢出在Redmi、OPPO等部分Android版本手机的Webview中，如果一个元素定义了border+border-radius，如果元素有背景，背景就会溢出圆角。出现这个问题的原因：主要是CSS对背景裁剪（background-clip）的处理方式不同，通常可以是border-box|填充盒|content-box这三个方法。浏览器默认的裁剪方式是border-box，即溢出边框外的背景会被裁剪掉。对于以上无法修剪边框外背景的手机，定义值为padding-box|content-box可以解决这个问题，但更推荐padding-box。因为content-box的使用，如果定义的padding不为0，背景将无法覆盖元素。<5>一个失败的圆（圆角）在移动平台开发时，用CSS画一个圆很简单，只需要一行代码：.circle{border-radius:50%;}但是，在AndroidBrowser2.*，这个定义会失效，取而代之的是显示默认的矩形。因为AndroidBrowser2.不支持百分比作为border-radius值，所以如果你需要兼容AndroidBrowser2.，那么你可以这样做：.circle{width:10rem;高度：10rem；border-radius:5rem;}如果觉得这个定义不够灵活，想偷懒的话，其实可以给border-radius预设一个比较大的值，比如100rem，避免当元素的size时更改时，圆角半径也必须更改，除非元素的大小超过您预设的阈值。<6>禁止文字缩放当移动设备在横屏和竖屏之间切换时，文字的大小会重新计算并相应缩放。当我们不需要这种情况时，我们可以选择禁止：html{-webkit-text-size-adjust:100%;}<7>Emailaddressrecognition在Android上（iOS没有），浏览器会自动识别字符串看起来像一个电子邮件地址，无论你是否添加了电子邮件链接，当你长按这个字符串时，都会弹出发送电子邮件的提醒。关闭邮件地址识别：
开启邮件发送：
dooyoe@gmail.com<8>如何禁止保存或复制图片通常在手机或pad上按住图片img，会弹出保存图片或复制图片的选项，如果不想让用户这样做,那么可以通过以下方法禁止:img{-webkit-touch-callout:none;}PS:需要注意的是，此方法仅在iOS<9>移动端取消触摸高亮效果时制作移动端页面，你会发现所有a标签触发点击或者所有设置伪类：active元素在激活时默认会显示一个高亮框，如果你不想这个高亮，可以通过禁用以下css方法：`.xxx{-webkit-tap-highlight-color:rgba(0,0,0,0);}`此设置适用于大多数机器。不过，三星在移动端有自己的浏览器。当点击页面上的任何a标签时，设置-webkit-tap-highlight-color:rgba(0,0,0,0)仍然会有阴影背景色，这应该是浏览器强制要求的。已添加的内容不能通过代码设置覆盖。有一个妥协的办法就是将页面上非真实跳转链接的a标签替换成其他标签，可以解决这个问题。<10>禁止在移动端选择内容如果不想让用户在页面上选择内容，那么可以在css中禁用：div{-webkit-user-select:none;}就这么简单，但目前只支持webkit内核的浏览器。今天找到这些，明天继续；
