移动端页面小bug

legendmohe 发布于2019-08-23 16:44 / 1330人阅读

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

滑动时页面警告

[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;

把这个写上即可解决

GPU云服务器云服务器移动端页面移动端页面显示移动端html页面移动端

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

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

移动端页面小bug

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

winterdawn 2019-08-02 16:11 评论0 收藏0
移动端页面小bug

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

youkede 2019-08-30 15:43 评论0 收藏0
前端培训-初级阶段-场景实战（2019-05-23）-移动端适配bug

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

xi4oh4o 2019-08-26 13:47 评论0 收藏0
前端培训-初级阶段-场景实战（2019-05-23）-移动端适配bug

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

FingerLiu 2019-08-02 16:18 评论0 收藏0