网站建设下拉导航栏,项目推广,深圳营销培训班,百度推广关键词排名规则不用说我也知道#xff0c;此类文章太多太多了#xff0c;常见的譬如#xff1a;viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影#xff08;这个我觉得真没必要去掉#xff0c;用户点击是需要反馈的#xff0c;而这个背景色刚刚好提供了一种反馈#…不用说我也知道此类文章太多太多了常见的譬如viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影这个我觉得真没必要去掉用户点击是需要反馈的而这个背景色刚刚好提供了一种反馈等等太多啦这些相信大家百度一下就可以查到很多资料 本篇文章主要是讲一些其他的或者优化手段。内容不多 1. 弹出数字键盘 !-- 有# *符号输入 --input typetel!-- 纯数字 --input patternd*安卓跟IOS的表现形式应该不一样大家可以自己试试。当运用了正则pattern后就不用关注input的类型了 2. 调用系统的某些功能!-- 拨号 --a hreftel:10086打电话给: 10086/a!-- 发送短信 --a hrefsms:10086发短信给: 10086/a!-- 发送邮件 --a hrefmailto:839626987qq.com发邮件给839626987qq.com/a!-- 选择照片或者拍摄照片 --input typefile acceptimage/*!-- 选择视频或者拍摄视频 --input typefile acceptvideo/*!-- 多选 --input typefile multiple同上 ♂️3. 打开原生应用a hrefweixin://打开微信/aa hrefalipays://打开支付宝/aa hrefalipays://platformapi/startapp?saId10000007打开支付宝的扫一扫功能/aa hrefalipays://platformapi/startapp?appId60000002打开支付宝的蚂蚁森林/a这种方式叫做URL Scheme是一种协议一般用来访问APP或者APP中的某个功能/页面如唤醒APP后打开指定页面或者使用某些功能 URL Scheme的基本格式如下 行为(应用的某个功能/页面) |scheme://[path][?query]| |应用标识 功能需要的参数一般是由APP开发者自己定义比如规定一些参数或者路径让其他开发者来访问就像上面的例子 注意事项唤醒APP的条件是你的手机已经安装了该APP某些浏览器会禁用此协议比如微信内部浏览器除非开了白名单后面应该会专门写一篇文章用来探讨唤醒APP 4. 解决active伪类失效body ontouchstart/body给body注册一个空事件即可 5. 忽略自动识别 !-- 忽略浏览器自动识别数字为电话号码 --meta nameformat-detection contenttelephoneno!-- 忽略浏览器自动识别邮箱账号 --meta nameformat-detection contentemailno当页面上的内容包含了手机号/邮箱等会自动转换成可点击的链接 比如你有如下代码 p13192733603/P但是有些浏览器会识别为手机并且可以点击拨号 6. 解决input失焦后页面没有回弹一般出现在IOS设备中的微信内部浏览器出现的条件为页面高度过小聚焦时页面需要往上移动的时候所以一般input在页面上方或者顶部都不会出现无法回弹 解决办法为在聚焦时获取当前滚动条高度然后失焦时赋值之前获取的高度templateinput typetext focusfocus blurblur/templatescriptexport default {data() {return {scrollTop: 0}},methods: {focus() {this.scrollTop document.scrollingElement.scrollTop;},blur() {document.scrollingElement.scrollTo(0, this.scrollTop);}}}/script6. 禁止长按以上行为可以总结成这几个每个手机以及浏览器的表现形式不一样长按图片保存、长按选择文字、长按链接/手机号/邮箱时呼出菜单。想要禁止这些浏览器的默认行为可以使用以下CSS// 禁止长按图片保存img {-webkit-touch-callout: none;pointer-events: none; // 像微信浏览器还是无法禁止加上这行样式即可}// 禁止长按选择文字div {-webkit-user-select: none;}// 禁止长按呼出菜单div {-webkit-touch-callout: none;}7. 滑动不顺畅粘手一般出现在IOS设备中自定义盒子使用了overflow: auto || scroll后出现的情况。优化代码 div {-webkit-overflow-scrolling: touch;}8. 屏幕旋转为横屏时字体大小会变具体出现的情况不明 有时候有有时候没有欢迎指出。优化代码* {-webkit-text-size-adjust: 100%;}9. 最简单的rem自适应大家都知道rem的值是根据根元素的字体大小相对计算的但是我们每个设备的大小不一样所以根元素的字体大小要动态设置 html {font-size: calc(100vw / 3.75);}body {font-size: .14rem;}效果如下像我一般的话直接搞lib-flexible、postcss-pxtorem就完事啦10. 滑动穿透当你想在出现遮罩的时候锁住用户的滚动行为你可以这么做。假设HTML结构如下 div classmaskdiv classcontent我是弹框/div/divCSS样式如下.mask {position: fixed;top: 0;left: 0;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background-color: rgba($color: #333, $alpha: .6);.content {padding: 20px;background-color: #fff;width: 300px;}}可以看到当在遮罩上滑动的时候是会穿透到父节点的最简单的办法就是阻住默认行为document.querySelector(.mask).addEventListener(touchmove, event {event.preventDefault({passive: false});});如果在vue中你可以这么写div classmask touchumove.prevent/div如果.content也有滚动条那么只要阻止遮罩本身就行document.querySelector(.mask).addEventListener(touchmove, event {if (event.target.classList.contains(mask)) event.preventDefault({passive: false});});或者 div classmask touchumove.self.prevent/div这样当出现遮罩的时候用户的滑动就会被锁住啦 像1px边框、唤醒APP后面会单独出文章因为涉及的内容比较多作者发际线还在链接稍微整理了几个经常在H5移动端开发遇到的东西 - 发际线还在 - 博客园来源博客园
