移动端h5开发问题汇总

最新推荐文章于 2022-05-10 15:47:57 发布

Cookysurongbin

最新推荐文章于 2022-05-10 15:47:57 发布

阅读量222

点赞数 1

分类专栏： css3 ios 微信浏览器移动端

本文链接：https://blog.csdn.net/Cookysurongbin/article/details/90770270

版权

这篇博客总结了移动端H5开发中遇到的一些问题，包括：div:active伪类在移动端无效，ios设备中input和textarea的默认样式处理，textarea边角圆角的去除，弹窗滚动冲突的解决，input type=date的placeholder显示问题，以及点击div出现选中框的处理。通过添加事件监听、修改样式和应用JavaScript等方法提供了相应的解决方案。

摘要由CSDN通过智能技术生成

div:active伪类无效问题

普通div在移动端:active伪类不会生效，应该是只有a，button此类才会生效，pc端正常

解决办法：在body添加touchstart事件监听

  <script>
    document.body.addEventListener('touchstart', function () {})
  </script>

2、ios浏览器input、textarea去除默认样式

input, textarea {
  -webkit-appearance: none; 
}

3、ios浏览器textare的border-radius默认为圆角，自行设置去除

4、弹窗后，滑动弹窗，底部页面在滚动，可在弹窗上的mask元素上添加@touchmove.prevent，

 <div class="dialog" v-if="isShow">
    <div class="dialog-mask" @touchmove.prevent></div>
    <div class="dialog-body">
           
    </div>
</div>

5、input type=date，placeholder不显示问题。解决方案：css + js