## 1.移动端适配与兼容性问题 ### 1）new Date（）在IOS上出现值为NAN的问题 * 但在IOS下，这是使用获取到的值是NAN。原因：因为IOS下的new Date()不支持"-“这个字符解决方法：把”-“改成‘”/"就可以了 ```js new Date("2017-08-11 12:00:00".replace(/-/g, "/")); ``` ### 2) Android部分机型使用height和line-height等值设置垂直居中，但会显示偏高的问题0 * 原因：貌似是有部分Android机型有自己默认的line-height，我们额外设置的line-height不起作用。解决办法：设置line-height：normal，再通过padding去设置居中就可以了。 ```js ``` line-height：normal; padding:xxpx 0; ### 3) 防止手机中网页放大和缩小。 - viewport 设置不缩放 ```html ### 3) iphone及ipad下输入框默认内阴影 ```css Element { -webkit-tap-highlight-color:rgba(255,255,255,0) } ``` ### 4) 某些Android手机圆角失效 ```css background-clip: padding-box; ``` ### 5) 移动端300ms点击延迟 * 设置meta标签禁止缩放 ```html

``` * FastClick > FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。 ### 6) 点击穿透问题 * 来得很直接github上有个fastclick可以完美解决引入fastclick.js，因为fastclick源码不依赖其他库所以你可以在原生的js前直接加上 ```js window.addEventListener( "load", function() { FastClick.attach( document.body ); }, false ); ``` * 对于B元素本身存在默认click事件的情况，应及用touchend代替tap事件并阻止掉时A元素touchend的默认行为preventDefault()，从而阻止click事件的产生。 ```js $("#aa").on("touchend", function (event) { //很多处理比如隐藏什么的 event.preventDefault(); }); ``` ### 7) 电话号码识别 * 在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： * 7 位数字，形如：1234567 * 带括号及加号的数字，形如：(+86)123456789 * 双连接线的数字，形如：00-00-00111 * 11 位数字，形如：13800138000 ```html 关闭识别 html复制代码 ``` ### 8) 邮箱识别邮箱识别安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的 meta 来管别邮箱的自动识别： ```html ``` ### 9) 常用meta 标签的设置 ```html //Android 禁止屏幕旋转 //全屏显示 //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。 //QQ强制竖屏 //QQ强制全屏 //QQ应用模式 ``` ### 10) 清除输入框内阴影 ```css div { -webkit-appearance: none; } ``` ### 11) 输入框默认字体颜色 ```css input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #c7c7c7; } input:-moz-placeholder, textarea:-moz-placeholder { color: #c7c7c7; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #c7c7c7; } ``` ### 12) 用户设置字号放大或者缩小导致页面布局错误 ```css body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; } ``` ### 13) android系统中元素被点击时产生边框 * 部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下 ```css css复制代码a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0) -webkit-user-modify:read-write-plaintext-only; } ``` ### 14) audio 和 video 在 ios 和 andriod 中自动播放 * 这个不是bug，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。加入自动触发播放的代码 ```js $('html').one('touchstart', function() { audio.play() }) ``` ### 15) iOS 上拉边界下拉出现空白 * 手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。 * 在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。 ```js document.body.addEventListener( 'touchmove', function(e) { if (e._isScroller) return // 阻止默认事件 e.preventDefault() }, { passive: false } ) ``` ### 16) onkeyUp 和 onKeydown 兼容性问题 * IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件，在安卓手机浏览器中没有问题，但是在 ios 手机浏览器中用输入法输入之后，并未立刻相应 keyup 事件 ### 17) IOS12 输入框难以点击获取焦点，弹不出软键盘 * 定位找到问题是 fastclick.js 对 IOS12 的兼容性，可在 fastclick.js 源码或者 main.js 做以下修改 ```js FastClick.prototype.focus = function(targetElement) { var length if ( deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' ) { length = targetElement.value.length targetElement.setSelectionRange(length, length) targetElement.focus() } else { targetElement.focus() } } ``` ### 18) IOS 键盘收起时页面没用回落，底部会留白通过监听键盘回落时间滚动到原来的位置 ```js window.addEventListener('focusout', function() { window.scrollTo(0, 0) }) //input输入框弹起软键盘的解决方案。 var bfscrolltop = document.body.scrollTop $('input') .focus(function() { document.body.scrollTop = document.body.scrollHeight //console.log(document.body.scrollTop); }) .blur(function() { document.body.scrollTop = bfscrolltop //console.log(document.body.scrollTop); }) ``` ### 19) iOS 下fixed 失效的原因 * 软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。解决方法: 不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll ```html

``` ```css .warper { position: absolute; width: 100%; left: 0; right: 0; top: 0; bottom: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */ } .fix-bottom { position: fixed; bottom: 0; width: 100%; } ``` ## 2.获取用户电量进行提示 ```js navigator.getBattery().then(function (battery) { // 获取设备电量剩余百分比 var level = battery.level //最大值为1,对应电量100% console.log('Level: ' + level * 100 + '%') // 获取设备充电状态 var charging = battery.charging console.log('充电状态: ' + charging) // 获取设备完全充电需要的时间 var chargingTime = battery.chargingTime console.log('完全充电需要的时间: ' + chargingTime) // 获取设备完全放电需要的时间 var dischargingTime = battery.dischargingTime console.log('完全放电需要的时间: ' + dischargingTime) }) ``` * 监听用户电池状态变化 ```js navigator.getBattery().then(function (battery) { // 添加事件，当设备电量改变时触发 battery.addEventListener('levelchange', function () { console.log('电量改变: ' + battery.level) }) // 添加事件，当设备充电状态改变时触发 battery.addEventListener('chargingchange', function () { console.log('充电状态改变: ' + battery.charging) }) // 添加事件，当设备完全充电需要时间改变时触发 battery.addEventListener('chargingtimechange', function () { console.log('完全充电需要时间: ' + battery.chargingTime) }) // 添加事件，当设备完全放电需要时间改变时触发 battery.addEventListener('dischargingtimechange', function () { console.log('完全放电需要时间: ' + battery.dischargingTime) }) }) ``` * 兼容性 [](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/602746fdee4f42b88e7b8675894e7c52~tplv-k3u1fbpfcp-zoom-in-crop-mark%3A1512%3A0%3A0%3A0.awebp) ## 3.小程序版本更新提示 ```js onShow: function(e) { console.log('showed2', e); uni.hideTabBar(); //系统获取本API返回全局唯一的版本更新管理器对象： updateManager，用于管理小程序更新。 const updateManager = uni.getUpdateManager(); console.log(updateManager, "uploadRes"); updateManager.onCheckForUpdate(function(res) { console.log(res, "uploadRes");//返回true 或 false 是否更新 // 请求完新版本信息的回调 console.log(res.hasUpdate); if (res.hasUpdate) { updateManager.onUpdateReady(function(res) { uni.showModal({ title: '更新提示', content: '新版本已经准备好，是否重启应用？', success(res) { if (res.confirm) { // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate(); } } }); }); updateManager.onUpdateFailed(function(res) { // 新的版本下载失败 uni.showModal({ title: "新版本已更新！", content: "新版本已上线，请重启小程序完成更新！" }); }); } }); }, ``` ## 4.手机端点击input输入框时网页自动放大这是因为在移动端自适应宽度的代码中，没有把input的自动缩放关闭！一般常见于苹果手机的ios系统，而安卓系统似乎是默认关闭。 input框自动放大，虽然说有便于用户的输入和阅读，但也同时给用户带来了视觉的麻烦，所以一般情况下，我们都是选择关闭自动缩放的！那么该如何关闭input输入框在手机端的这个缩放效果呢？ 1，找到你的网页头部head的代码，查看代码并找到，下面的这段： `` 这段 2，找到之后，将这段代码更改为： `` ## 5.常用api ``` show-menu-by-longpress | 标签添加后长按扫描二维码