一.高德地图定位问题
类似 Chrome 等浏览器框架目前禁止非 https 环境进行定位，所以原本的高德定位api定位失败。
解决如下：
需要引入的remogeo.js ，本地新建一个js文件，将以下网址内容添加进去，http://a.amap.com/jsapi_demos/static/remogeo/remogeo.js。
也可以直接引用链接。高德定位api详情参考http://lbs.amap.com/api/javascript-api/reference/location#m_AMap.Geolocation。
关键代码如下：
mapObj.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000, //超过10秒后停止定位，默认：无穷大
buttonOffset: new AMap.Pixel(10, 50),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
buttonPosition:'RT'，
} );
// ios环境切换到使用远程https定位 （放在初始化地图后面）
if(AMap.UA.ios) { //使用远程定位，见 remogeo.js
varremoGeo =newRemoGeoLocation();
//替换方法
navigator.geolocation.getCurrentPosition = function(){
return remoGeo.getCurrentPosition.apply(remoGeo,arguments);
};
//替换方法
navigator.geolocation.watchPosition = function(){
return remoGeo.watchPosition.apply(remoGeo,arguments);
};
}
二.微信内置浏览器在ios系统下出现audio/video无法播放问题
问题发生：正常let testElement = document.getElementById('testAudio'); 获取到audio/video标签，然后调用testAudio.play()播放音频/视频文件，在各大浏览器测试好使。但在ios系统下微信内置浏览器中无反应。
解决方案：微信私有接口WeixinJSBridge。
详细例子参考https://www.cnblogs.com/txw1958/p/WeixinJSBridge-api.html
WeixinJSBridge-API原文http://qydev.weixin.qq.com/wiki/index.php
方法：HTML文档引入 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 标签（目前最新版为1.2.0）
需要播放的时候判断类型
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
testElement .play();
}
}
注意：推荐react的video播放器组件 video-react、html5video。但是在微信内置浏览器里面还是不能使用，请用原生audio/video标签去写。
三.移动端适配iPhoneX的问题
由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下：
1、顶部通栏
之前的客户端一直采用状态栏20pt+导航栏44pt的做法。由于iphoneX多了一块小刘海，因此iphoneX单独采用状态栏44pt+导航栏44pt，意味着内嵌的H5页面整体下移24pt。
2、底部操作栏
由于iphoneX是全面屏，页面最底部会被弯曲的拐角截掉一部分，特别是有底部固定悬浮的tab条会严重受到影响。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为34pt。
终上所述，结合iphoneX目前特有的手机参数我们可以采用的适配方法为：
（1）meta标签
ios11为了适配iphoneX对现有的viewport meta标签新增一个特性：viewport-fit，如果客户端没有做全屏适配，那么页面想要全屏覆盖，则可使用该特性：
<meta name="viewport"content="width=device-width,viewport-fit=cover" >
（2）媒体查询
1、利用constant函数
只有设置了viewport-fit=cover才能使用constant函数
@supports(bottom:constant(safe-area-inset-bottom)) {
selector{
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom));//根据实际情况选择适配方法
}
}
2、利用iphoneX独特的型号参数
@mediaonly screenand(device-width:375px)and(device-height:812px)and(-webkit-device-pixel-ratio:3) {
#buy {
padding-bottom:34px;
}
}
（3）js判断（以下采用Jquery）
if($(window).width() ===375&&$(window).height() ===724&& window.devicePixelRatio ===3){
#buy {
padding-bottom:34px;
}
}
（4）客户端协议
也可以根据客户端协议请求客户端查询是否是iphoneX，以此来保持和客户端一致。
3、参数解释
以上代码中的参数解释如下：
safe-area-inset-bottom — ios11新增特性，用于设定安全区域与边界的距离
375 — iphoneX设备的宽度
812 — iphoneX设备的高度
3 — iphoneX设备的DPR
724 — iphoneX设备的高度(812) - 顶部通栏高度(88)
34 — 底部安全区域高度
以上参数均以标准的1pt=1px进行计算，如果H5页面采用缩放的rem方式，那么1pt = 1px * 3（iphoneX分辨率）
网友评论