移动端-必会遇到

  • 1 overflow: auto; // ios卡顿,解决办法 -webkit-overflow-scrolling: touch;
  • 2 iphone 刘海版底部区域增大 放在点击不到
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
    
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  • 3 解决移动端ios下overflow-x: auto 无法隐藏滚动条的问题
    将高度变高,通过遮挡的方式将滚动条挡住

  • 4 a 标签长按会有黑色区域框,去除办法-webkit-tap-highlight-color
    -webkit-tap-highlight-color是ios和android下点击元素时出现的阴影,-webkit-tap-highlight-color: transparent;;可以将该阴影透明化,进而解决问题
    a标签和其他比如div标签点击出现的黑色区域不同
    a标签是长按有个黑底,div是绑定了点击事件时候,点击闪现黑色背景,并不是每次会出现,但是设置-webkit-tap-highlight-color: transparent; 将不会出现

  • 某些浏览器会将数值识别为电话,加这个之后不会识别
原文地址:https://www.cnblogs.com/Running00/p/13144394.html