资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/移动端页面小bug

移动端页面小bug

youkede / 3397人阅读

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

滑动时页面警告 
</>复制代码 
  1. [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

解决方法

</>复制代码 
  1. * {
  2.     -ms-touch-action: pan-y;
  3.     touch-action: pan-y;
  4. }
text-align-last safari 不支持的解决办法 
</>复制代码 
  1.   
       
    •    
    •  姓名 
      •  
    •    
    •  身份证号码 
    •   
</>复制代码 
  1. .item-title {
  2.     display: block;
  3.     width: 1.2rem;
  4.     height: 0.54rem;
  5.     line-height: 0.54rem;
  6.     margin-right: 0.4rem;
  7.     text-align-last: justify;
  8.     text-align: justify;
  9.     overflow: hidden;
  10. }
  11. .item-title:after {
  12.     content: "";
  13.     width: 100%;
  14.     display: inline-block;
  15.     overflow: hidden;
  16.     height: 0;
  17. }
</>复制代码 
  1. 重点在于给span设置高度和伪元素
iOS微信去掉底部返回横条问题 

</>复制代码 
  1. document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
  2.     WeixinJSBridge.call("hideToolbar");
  3.     });
input框自动填充内容背景颜色为黄色 
</>复制代码 
  1. input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;}
设置letter-spacing文字不居中

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

</>复制代码 
  1. .list-view-item .name {
  2. padding-left: 0.8rem;
  3. font-size: 0.32rem;
  4. letter-spacing: 0.8rem;
  5. text-align: center;
  6. }
安卓端底部按钮被软键盘顶上去挡住输入框 
</>复制代码 
  3. function intoView(el) {
  4.   setTimeout(function() {
  5.     el.scrollIntoViewIfNeeded();
  6.   }, 500);
  7. }
实现0.5px边框在华为手机不显示问题

我的写法是这样的

</>复制代码 
  1. .border:before {
  2.     position: absolute;
  3.     right: 0;
  4.     bottom: 0;
  5.     left: 0;
  6.     height: 1px;
  7.     content: "";
  8.     -webkit-transform: scaleY(.5);
  9.     transform: scaleY(.5);
  10.     background-color: #ffffd;
  11. }

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

</>复制代码 
  1.  -webkit-transform-origin: 0 0;
  2.    transform-origin: 0 0;

把这个写上即可解决

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/116076.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...

    legendmohe 评论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条评论

youkede

女|高级讲师
我要私信

TA的文章

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