挪动端页面小bug

2019年9月1日 142次阅读 来源: 山海

滑动时页面正告

[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微信去掉底部返回横条题目

《挪动端页面小bug》

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;

把这个写上即可处理

    原文作者：山海
    原文地址: https://segmentfault.com/a/1190000018765018
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞