资讯专栏INFORMATION COLUMN

移动端页面小bug

legendmohe / 1318人阅读

摘要:滑动时页面警告解决方法不支持的解决办法姓名身份证号码重点在于给设置高度和伪元素微信去掉底部返回横条问题框自动填充内容背景颜色为黄色设置文字不居中设置间距和等值即可

滑动时页面警告
[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 不支持的解决办法
  
  • 姓名
  • 身份证号码
.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;
}
安卓端底部按钮被软键盘顶上去挡住输入框


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: #ffffd;
}

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

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

把这个写上即可解决

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/103219.html

相关文章

  • 移动页面bug

    摘要:滑动时页面警告解决方法不支持的解决办法姓名身份证号码重点在于给设置高度和伪元素微信去掉底部返回横条问题框自动填充内容背景颜色为黄色设置文字不居中设置间距和等值即可 滑动时页面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...

    winterdawn 评论0 收藏0
  • 移动页面bug

    摘要:滑动时页面警告解决方法不支持的解决办法姓名身份证号码重点在于给设置高度和伪元素微信去掉底部返回横条问题框自动填充内容背景颜色为黄色设置文字不居中设置间距和等值即可 滑动时页面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...

    youkede 评论0 收藏0
  • 培训-初级阶段-场景实战(2019-05-23)-移动适配bug

    摘要:前端最基础的就是。默认构建一个真实的设置为一个理想值追加到树中获取理想值和实际值的比例计算值进行比例换算移动端适配方案前端培训初级阶段之移动端适配原理参考文献淘宝弹性布局方案实践布局详解移动端自适应方案 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技...

    FingerLiu 评论0 收藏0
  • 培训-初级阶段-场景实战(2019-05-23)-移动适配bug

    摘要:前端最基础的就是。默认构建一个真实的设置为一个理想值追加到树中获取理想值和实际值的比例计算值进行比例换算移动端适配方案前端培训初级阶段之移动端适配原理参考文献淘宝弹性布局方案实践布局详解移动端自适应方案 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技...

    xi4oh4o 评论0 收藏0

发表评论

0条评论

legendmohe

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<