移动端css、Js优处理

CSS 篇

0.5px细线

移动端 H5 项目越来越多，设计师对于 UI 的要求也越来越高，比如 1px 的边框。在高清屏下，移动端的 1px 会很粗。

那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 像素的比值。目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏来说，设备的物理像素要实现 1 像素，而 DPR=2，所以 css 像素只能是 0.5。

下面介绍最常用的方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body{
      padding: 300px;
    }
    .border{
      width: 300px;
      border-bottom: 1px solid red;
    }
    /* 底边框 */
    .b-border{
      width: 300px;
      position: relative;
    }
    .b-border:before{
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: red;
      transform: scaleY(0.5);
      -webkit-transform: scaleY(0.5);
      transform-origin: 0 0;
      -webkit-transform-orgin: 0 0;
    }
    /* 上边框 */
    .t-border{
      width: 300px;
      position: relative;
    }
    .t-border::before{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      background: red;
      transform: scaleY(0.5);
      -webkit-transform: scaleY(0.5);
      transform-origin: 0 0;
      -webkit-transform-orgin: 0 0;
    }
    /* 左边框 */
    .l-border{
      height: 30px;
      position: relative;
    }
    .l-border::before{
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 1px;
      height: 100%;
      background: red;
      transform: scaleX(0.5);
      -webkit-transform: scaleX(0.5);
      transform-origin: 0 0;
      -webkit-transform-origin: 0 0 ;
    }
    /* 右边框 */
    .r-border{
      height: 30px;
      position: relative;
    }
    .r-border::before{
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 1px;
      height: 100%;
      background: red;
      transform: scaleX(0.5);
      -webkit-transform: scaleX(0.5);
      transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
    }
  </style>
</head>
<body>
  <div>1px边框:</div>
  <br/>
  <div class="border"></div>
  <br/>
  <div>0.5px边框:</div>
  <br/>
  <div>底边框:</div>
  <br/>
  <div class="b-border"></div>
  <br/>
  <div>上边框:</div>
  <br/>
  <div class="t-border"></div>
  <br/>
  <div>左边框:</div>
  <br/>
  <div class="l-border"></div>
  <br/>
  <div>右边框:</div>
  <br/>
  <div class="r-border"></div>
  <br/>
</body>
</html>

效果如下：

屏蔽用户选择

禁止用户选择页面中的文字或者图片

div {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

如何禁止保存或拷贝图像

代码如下

img {
  -webkit-touch-callout: none;
}

输入框默认字体颜色

设置 input 里面 placeholder 字体颜色

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c7c7c7;
}

用户设置字号放大或者缩小导致页面布局错误

设置字体禁止缩放

/* ios */
body {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

/* Android */
<script>
　　　　 //android禁止微信浏览器调整字体大小
        if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
            handleFontSize();
        } else {
            if (document.addEventListener) {
                document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
            } else if (document.attachEvent) {
                document.attachEvent("WeixinJSBridgeReady", handleFontSize);
                document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  }
        }
        function handleFontSize() {
            // 设置网页字体为默认大小
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
            // 重写设置网页字体大小的事件
            WeixinJSBridge.on('menu:setfont', function() {
                WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
            });
        }
</script>

Android 系统中元素被点击时产生边框

部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下

a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-user-modify:read-write-plaintext-only; 
}

ios 滑动不流畅

ios 手机上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。

解决方案

1、在滚动容器上增加滚动 touch 方法

.wrapper {
  -webkit-overflow-scrolling: touch;
}

2、设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。

body {
  overflow-y: hidden;
}
.wrapper {
  overflow-y: auto;
}

JS 篇

iOS 上拉边界下拉出现空白

手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。

在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

解决方案

document.body.addEventListener(
  'touchmove',
  function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)

参考文章：总结移动端H5开发常用技巧

移动端css、Js优处理

猜你喜欢