Erlo

总结微信公众平台网页开发中遇到的ios的兼容问题

时间:2019-03-14 12:02   阅读:98次   来源:博客园页面报错

点赞 打赏

×打赏

支付宝

微信

1. ios中音频不自动播放;

原因:出于节省流量的初衷,ios系统禁止音视频自动播放。

解决方案:使用微信的JS-SDK。

DEMO:

先引入微信的JS-SDK,

1 <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

然后在wx.ready中调用play方法播放。

 1 var audio = document.getElementById('bgmusic');
 2     autoPlayAudio();
 3     function autoPlayAudio() {
 4         wx.config({
 5             // 配置信息, 即使不正确也能使用 wx.ready
 6             debug: false,
 7             appId: '',
 8             timestamp: 1,
 9             nonceStr: '',
10             signature: '',
11             jsApiList: []
12         });
13         wx.ready(function() {
14             audio.play();
15         });
16     }

2. 微信升级到7.0版本以后,填写表单信息弹出键盘会把页面顶上去,键盘消失的时候页面不自动下来;

解决方案:使用onblur方法在表单失去焦点的时候让页面滚动到最顶部。

DEMO:

1 <form class="form" action="" method="">
2             <div><label for="idNumber">身份证号</label><input type="text" name="idNumber" onblur="window.scrollTo(0, 0);" id="idNumber"></div>
3         </form>

3. 去除移动端点击时的背景;

1 *{
2     -webkit-tap-highlight-color: rgba(0,0,0,0);
3     -webkit-tap-highlight-color:transparent;
4 }

4. 去掉input框的默认样式;

1 input {
2     background-color: transparent;#zs#背景变透明#fzs#
3     filter: alpha(opacity=0); #zs#androd#fzs#
4     appearance: none;  #zs#去除系统默认appearance的样式,常用于IOS下移除原生样式(下拉框去掉右侧图标等)#fzs#
5     -moz-appearance: none;
6     -webkit-appearance: none;
7 }

 

下一篇:Html5知识点

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-05-24 14:45:23Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 首页 笔记分享 案例展示 ERLO 搜索
    鼠标试试
    返回顶部