移动端页面小bug

滑动时页面警告

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

解决方法

* {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

text-align-last safari 不支持的解决办法

  <ul class="list-view"> 
   <li class="list-view-item box-center-v border"> <span class="item-title">姓名</span> </li> 
   <li class="list-view-item box-center-v border"> <span class="item-title">身份证号码</span> </li>
  </ul>

---

.item-title {
    display: block;
    width: 1.2rem;
    height: 0.54rem;
    line-height: 0.54rem;
    margin-right: 0.4rem;
    text-align-last: justify;
    text-align: justify;
    overflow: hidden;
}

.item-title:after {
    content: '';
    width: 100%;
    display: inline-block;
    overflow: hidden;
    height: 0;
}

---

重点在于给span设置高度和伪元素

iOS微信去掉底部返回横条问题

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    WeixinJSBridge.call('hideToolbar');
    });

input框自动填充内容背景颜色为黄色

input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;}

设置letter-spacing文字不居中

设置letter-spacing间距和padding-left等值即可

.list-view-item .name {
padding-left: 0.8rem;
font-size: 0.32rem;
letter-spacing: 0.8rem;
text-align: center;
}

安卓端底部按钮被软键盘顶上去挡住输入框

<label for="name"></label>
<input type="text" value="" id="name" onclick="intoView(this)">
function intoView(el) {
  setTimeout(function() {
    el.scrollIntoViewIfNeeded();
  }, 500);
}

实现0.5px边框在华为手机不显示问题

我的写法是这样的

.border:before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #ddd;
}

发现这个写法在其他手机没问题唯独在华为手机显示不出

 -webkit-transform-origin: 0 0;
   transform-origin: 0 0;

把这个写上即可解决