ios h5端页面点击input 输入框会自动放大页面解决办法与iOS 端 h5页面自动播放音频被禁止解决方法

ios h5端页面点击input 输入框会自动放大页面解决办法

• 设置meta标签

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">

meta标签的各项含义

viewport 表示可视区域
width 可视区域的宽度，值可为数字或关键词device-width（设备的宽度）
initial-scale 初始的缩放比例 （范围从>0到 10 ）
minimum-scale 允许用户缩放到的最小比例
maximum-scale 允许用户缩放到的最大比例
user-scalable 用户是否可以手动缩放
apple-mobile-web-app-capable 表示苹果工具栏和菜单栏，默认content为no，即显示工具栏和菜单栏。设置将content设置成yes即为不显示

• 如果不行，可采用font-size

  • 例如vue项目的话，在主scss文件中添加以下即可

  input,select,button{
  	font-size: 16px;
  }
  

iOS 端 h5页面自动播放音频被禁止解决方法

• 给整体页面添加一个触摸事件

<div v-on:touchstart.once="playBgMusic()"></div>
<audio src="" ref="guideVoice"></audio>

• 用户进入页面，一触摸触发函数，让其播放，然后立马暂停，此时音频被加载，自动播放不再被禁止
• 谷歌浏览器，可以将其放在进入页面的时候执行这个函数

 playBgMusic () {
   this.$refs.guideVoice.play()
   this.$refs.guideVoice.pause()
 },

• 这样就可以像通过socket了等等去触发自动音频了