移动端兼容问题收录

1px问题

原因

做移动端页面时一般都会设置meta viewport的content=“width=device-width”，但css最低只支持1px，不足1px 会显示为1px。而如果设计稿是750px，750px的1px，在375px的屏幕上，则需要显示为0.5px，而css不支持0.5px，会将其显示为1px（但ios新版本支持0.5px，安卓暂不支持），所以兼容问题就产生了

解决方案

方案一

和设计师沟通，让设计稿中避免出现1px的值 优先沟通，从问题的根源解决

方案二

通过各种方式去兼容

方式一：伪元素 + transform: scale()缩放

原理： 在目标元素的后面追加一个 ::after 伪元素，让这个元素布局为 absolute 之后、整个伸展开铺在目标元素上，然后把它的宽和高都设置为目标元素的两倍，border值设为 1px。接着借助 CSS 动画特效中的放缩能力，把整个伪元素缩小为原来的 50%。此时，伪元素的宽高刚好可以和原有的目标元素对齐，而 border 也缩小为了 1px 的二分之一，间接地实现了 0.5px 的效果。

单边

/* 下边框 */
.div::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-bottom: 1px solid #bfbfbf;
    transform: scaleY(1/2);
    transform-origin: left bottom;
}

/* 右边框 */ 
.div::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    border-right: 1px solid #bfbfbf;
    transform: scaleX(1/2);
    transform-origin: right bottom;
}
复制代码

所有边

 .div::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 300%;
    height: 300%;
    border: 1.5px solid #bfbfbf;
    transform: scale(1/1.5/2);
    transform-origin: left top;
    border-radius: 6px;
}
复制代码

参考文章

移动端1px问题解决方案 - 掘金 (juejin.cn)

1px像素问题（二）：解决方法_醉逍遥neo的博客-CSDN博客

1px像素问题（二）：解决方法_醉逍遥neo的博客-CSDN博客

前端1px问题及解决方案 - 掘金 (juejin.cn)

吃透移动端 1px｜从基本原理到开源解决方案 - 知乎 (zhihu.com)

解决移动端1px边框问题的几种方法 - 掘金 (juejin.cn)

移动端1px解决方案 - 掘金 (juejin.cn)

点击事件300ms延迟问题

原因

移动端要判断是否是双击，所以单击之后不能够立刻触发click，要等300ms，直到确认不是双击了才触发click。所以就导致了click有延迟。

解决方案

<meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码

注意

采用此解决方案，将不会再有浏览器默认的双击缩放功能

参考文章

关于h5端点击事件300ms延迟问题 - 掘金 (juejin.cn)

关闭IOS键盘首字母大写

解决方案

<input type='text' autocapitalize="false">
复制代码

参考文章

autocapitalize - HTML（超文本标记语言） | MDN (mozilla.org)

让Chrome支持小于12px的文字

解决方案：

通过 transform: scale(x) 实现

div{
  font-size: 100px;
}
div span{
  display: inline-block;
  /* 
  这个span会继承div的字体大小，这里再设置为缩放为0.1倍，那就是10px。
  注意：这里缩放的是盒子的大小，来间接达到显示小字体大小的效果，
  实际并不是直接控制了字体大小。因此实际还是要避免设计稿中出现小于12px的字体大小
  */
  transform: scale(0.1);
}
复制代码

去除IOS中被触摸元素的半透明遮罩

解决方案

button,
a,
textarea,
input {
    tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
复制代码

禁止ios长按触发系统菜单，禁止IOS & Android 长按时下载图片

解决方案

html,body{
    touch-callout: none;
    -webkit-touch-callout: none;
}
复制代码

禁止 IOS & Android 用户选中文字

解决方案

html,body{
    user-select: none;
    -webkit-user-select: none;
}
复制代码

边框支持渐变

CSS实现渐变色边框（Gradient borders）的5种方法 - 掘金 (juejin.cn)