移動端頁面小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;

把這個寫上便可解決