企业微信链接适配安卓ios移动端问题汇总

ios网页上拉下弹(橡皮筋样式)

ios在 meta标签配置viewport时要加viewport-fit=cover，防止底部黑色小横条部分出现小白边遮挡footer部分。

该问题布局可使用fixed上中下布局，内容部分使用overflow-y: auto; overflow-x: hidden;-webkit-overflow-scrolling: touch;局部滚动。

也可以使用监听器，禁止内容其他部分按钮触发滚动，内容部分绑定touchmove给一个true，监听器内判断为true不触发禁止默认事件。

使用elementui的话，弹出层要加:modal-append-to-body="false"

使用fixed 局部滑动可能会穿透导致页面卡顿无法滑动，主要原因是触发到了body层的滑动，解决：

//防止局部滚动穿透触发body部分滚动条，ios滑动卡住，
document.getElementById('scroll').addEventListener('scroll', this.handleScroll)},handleScroll() {const scrollTop = document.getElementById('scroll').scrollTopif (scrollTop <= 0 || scrollTop > document.getElementById('scroll').offsetHeight) {document.body.style.overflow = 'hidden'} else {document.body.style.overflow = 'auto'}},

.container {font-size: 2vh;background: #ffffff;height: 100%;overflow: hidden;position: fixed;top: 0;left: 0;
}
.header {position: fixed;z-index: 999;top: 0;left: 0;height: 10vh;width: 100vw;
}
.footer {height: 10vh;width: 100vw;line-height: 2.5vh;background: #ffffff;position: fixed;z-index: 999;bottom: 0;left: 0;
}
.main {width: 100vw;margin-top: 10vh;overflow-y: auto;overflow-x: hidden;-webkit-overflow-scrolling: touch;
}

监听器：我没用此方法，

<divclass="main"@touchmove="$event._isScroller = true">destroyed() {document.body.removeEventListener('touchmove', this.scroll, {passive: false,})},created() {//移动端适配ios 禁止ios浏览器上下拉回弹document.body.addEventListener('touchmove', this.scroll, {passive: false,})},scroll(e) {if (e._isScroller) returne.preventDefault()},

项目中部分页面适配移动端，其他页面不能被影响

移动端页面初始大小一倍，最大放大数随意，禁止缩放，ios注意viewport-fit=cover，安卓端注意弹起键盘时，高度变化影响布局等，viewport中设置height固定高度，ios中不需要，机型已适配，ios使用window.innerHeight会多一个小横条的高度，会引起浏览器滚动。

router.afterEach((to, form) => {/** 移动端页面适配，最大缩放1.0 */let metaEl = document.querySelector('#viewportMeta')let userAgent = (typeof navigator !== 'undefined' && navigator.userAgent) || ''let platform = (typeof navigator !== 'undefined' && navigator.platform) || ''let maxTouchPoints = (typeof navigator !== 'undefined' && navigator.maxTouchPoints) || 1let isIOS =/\b(iPad|iPhone|iPod)(?=;)/.test(userAgent) || (platform === 'MacIntel' && maxTouchPoints > 1)if (to.name.indexOf("negotiateCase-mobileTerminal-") != -1) {let name = 'viewport'var content = `width=device-width, initial-scale=1.0,${to.name.indexOf("negotiateCase-mobileTerminal-pdf") != -1?'':'maximum-scale=1.0, user-scalable=no,'}  viewport-fit=cover`metaEl.setAttribute('name', name)metaEl.setAttribute('content', content)/** 防止移动端键盘弹出时影响高度:刚进入时高度为未缩放控制1.0时高度，所以先控制，再设置高度 */if (!isIOS) { let height = window.innerHeightvar content = `height=${height}, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no`metaEl.setAttribute('content', content)}} else if (metaEl.getAttribute('name')) { metaEl.removeAttribute('name')metaEl.removeAttribute('content')location.reload()}})

操作后样式、数据不改变
el-button点击后按钮颜色一直是灰色，失焦后变绿：点击事件内进行按钮失焦或在focus聚焦时改变内部样式为按钮颜色 .btn:focus

数据缓存，在div上绑定自定义属性，在操作数据后给属性更改值 new Date().getTime()

企业微信多个# ios转码
跳转的链接参数url不传全部url，传id，前端判断，获取url上参数方法：

 /*获取地址栏里指定的参数值用法:getUrlValue()["id"]*/getUrlValue() {var vars = {}//正则：?或&一次或多次 非=和&一次或多次 = 非？和&零次或多次  多次查找，不区分大小写var parts = decodeURIComponent(window.location.href).replace(/[?&]+([^=&]+)=([^?&]*)/gi, function (m, key, value) {vars[key] = value})return vars},

企业微信链接适配安卓ios移动端问题汇总相关推荐

cocos2dx+JAVA手游《全民挂机》全套源码支持安卓+IOS双端
cocos2dx+JAVA手游<全民挂机>全套源码支持安卓+IOS双端,客户端用cocos2dx 2.2.3实现,服务端用java,支持安卓+IOS双端,一款很不错的挂机游戏源码! 源码下 ...
cocos creator休闲游戏甜品幻想H5+安卓+IOS三端源码开发脚本为javaScript
cocos creator休闲游戏甜品幻想H5+安卓+IOS三端源码,开发脚本为javaScript方便扩展和阅读,支持cocos creator2.X版本,完整的源码可拿来运营学习研究二次开发. 1 ...
cocos creator 横版射击游戏突击对决H5+安卓+IOS三端源码
cocos creator 横版射击游戏突击对决H5+安卓+IOS三端源码,多关卡,开发脚本为js方便扩展和阅读,支持cocos creator2.X版本,完整的源码可直接运营. 源码下载链接 co ...
cocos creator2.3.5休闲游戏英文版（连连看）源码H5+安卓+IOS三端源码
cocos creator2.3.5休闲游戏英文版(连连看)源码H5+安卓+IOS三端源码,开发脚本为typeScript方便扩展和阅读,支持cocos creator2.X版本,完整的源码可直接运营 ...
unity3D埃及探险游戏源码，支持安卓+IOS双端 unity2019 C#语言开发
unity3D埃及探险游戏源码,支持安卓+IOS双端 unity2019 C#语言开发.完整的源码可直接运营.拿来学习研究和二次开发都很不错. 源码下载 unity3D埃及探险游戏源码C#语言开发.完 ...
cocos creator3.3.0休闲游戏（云浮消消乐）源码H5+安卓+IOS三端源码
cocos creator3.3.0休闲游戏(云浮消消乐)源码H5+安卓+IOS三端源码,开发脚本为typeScript方便扩展和阅读,支持cocos creator3.X版本,完整的源码可直接运营. ...
休闲游戏合成植物打僵尸源码-H5+安卓+IOS三端源码
游戏引擎:Cocos Creator 2.3.3 编程语言:TypeScript cocos creator休闲游戏合成植物打僵尸源码-H5+安卓+IOS三端源码,开发脚本为javaScript方便扩 ...
cocos creator经典游戏英文版《俄罗斯方块》源码H5+安卓+IOS三端源码
cocos creator2.2.2经典游戏英文版<俄罗斯方块>源码H5+安卓+IOS三端源码,开发脚本为typeScript方便扩展和阅读,支持cocos creator2.X版本,完整 ...
cocos creator2.2.2休闲游戏（单机捕鱼）源码H5+安卓+IOS三端源码
cocos creator2.2.2休闲游戏(单机捕鱼)源码H5+安卓+IOS三端源码,开发脚本为typeScript方便扩展和阅读,支持cocos creator2.X版本,完整的源码可直接运营. ...

企业微信链接适配安卓ios移动端问题汇总

企业微信链接适配安卓ios移动端问题汇总相关推荐

最新文章

热门文章