码迷,mamicode.com
首页 > 其他好文 > 详细

H5端常见问题

时间:2019-10-11 12:09:19      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:type   his   https   start   text   标签   解决   pre   微信   

1.弹窗数字键盘

 <!-- 有‘#‘,‘*‘符号的键盘 -->
  <input type="tel"/>
  <!-- 纯数字的键盘(使用正则pattern) -->
  <input pattern="\d*"/>

2.打开原生应用

<a href="weixin://">打开微信</a>
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝</a>

这种方式叫做URL Scheme,是一种协议,一般用来访问APP或者APP的某个页面、功能

协议格式:

scheme://[path][?query]

3.忽略自动识别

有些浏览器会自动识别账号为手机号或者邮箱,例如<p>15018888888</p>

可以在meta标签添加属性避免这种情况

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />

4.解决input失去焦点后页面没有回弹

一般出现在IOS设备中的微信内部浏览器,出现的条件为页面高度过小,聚焦时页面需要往上移动

解决方案:

<template>
  <input type="text" v-model="inputData" @focus="focus" @blur="blur" />
</template>
<script>
export default {
  data() {
    return {
      inputData: ‘‘,
      scrollTop: 0
    }
  },
  methods: {
    focus() {
      this.scrollTop = document.scrollingElement.scrollTop
    },
    blur() {
      document.scrollingElement.scrollTo(0, this.scrollTop)
    }
  }
}
</script>

5. 滑动不流畅

一般出现在ios设备中,自定义盒子使用了overflow:auto || scroll后出现的情况

优化代码

div {
  -webkit-overflow-scrolling: touch;
}

 

https://juejin.im/post/5d6e1899e51d453b1e478b29

H5端常见问题

标签:type   his   https   start   text   标签   解决   pre   微信   

原文地址:https://www.cnblogs.com/wangxirui/p/11653283.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!