移动端h5开发问题汇总

最新推荐文章于 2021-03-18 11:17:27 发布

原创最新推荐文章于 2021-03-18 11:17:27 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

css3 同时被 3 个专栏收录

4 篇文章

订阅专栏

ios

4 篇文章

订阅专栏

移动端

3 篇文章

订阅专栏

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

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

// css: 设置伪类显示
input[type="date"]:before{
    content: attr(placeholder);
    width: 100%;
    text-align: center;
    color:#bebebe;
}

// js控制placeholder显示
<input
   type="date"
   placeholder="开始日期"
   v-model="startTime"
   class="search-date startTime ant-calendar-picker-input ant-input"
   @blur="onBlur"
   @focus="onFocus">

onBlur (e) {
   if (e.target.value === '') {
      e.target.setAttribute('placeholder', e.target.className.includes('startTime') ? '开始日期' : '结束日期')
   }
},
onFocus (e) {
   e.target.removeAttribute('placeholder')
},

6、手机端点击div 出现框框

div {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}