摘要:是在系列事件发生后大约才触发的,混用和就会导致点透问题。获取视图原始高度方案二能较好地处理滚动的问题。禁止蒙层底下页面跟随滚动原因弹窗是常见的交互方式,而蒙层是弹窗必不可少的元素。
平时的开发过程中,经常会遇到一些疑难杂症,在这里记录一下常用的解决方案。
UI小姐姐要求的0.5px线
原因:不同手机的兼容不一样,尤其安卓
IOS的Safari表现是比较好的,safari是可以支持浮点型的属性的。因此在IOS的系统中,0.5px是可以实现的。但在Andriod手机下,有些Andriod系统的浏览器,会对浮点型数据执行四舍五入的情况,即给元素设置border-width:0.5px,那么其表现与你设置border-width:1px;是相同的。
方案一:放大2倍再缩小
// 放大再缩小 &:before{ content: ""; position: absolute; top: 0; left: 0; width: 200%; height: 200%; border: 1px solid #565D66; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); -o-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); }
方案二:修改透明度为0.5,线条四周看起来会淡很多,或许能骗过小姐姐。
点击穿透问题
原因:移动浏览器提供一个特殊的功能:双击(double tap)放大。导致了著名300ms的时间延迟问题。click是在touch系列事件发生后大约300ms才触发的,混用touch和click就会导致点透问题。
方案一:300毫秒之后再消失弹窗,做个动画消失效果过渡。
setTimeout(() => { dialog.close(); }, 300);
方案二:touchStart后300ms都被一个透明不可见的div去覆盖,第二个click是点不到对应的a。
// html // js function onDeviceReady() { setTimeout(function(){ $("#preventClick").hide(); }, 300); }
方案三:使用fastClick,个人认为最好最简单的方法
方案四:页面全部点击事件换成click,这样会感觉慢慢慢
方案五:页面全部事件换成touch事件,但需要注意的是a标签的href也是click。
Android 浏览器文本垂直居中
原因:在开发中,常使用 line-height 属性来实现文本的垂直居中,但是在安卓浏览器渲染中有一个常见的兼容问题,就是对于小于12px的字体,尤其是奇数的字体大小,使用 line-height 属性进行垂直居中的时候,渲染出来的效果会偏上一些。
方案一:放大两倍,再用 scale 进行缩小一倍
div { display: inline-block; height: 40px; line-height: 40px; font-size: 20px; transform: scale(0.5); transform-origin: 0%, 0%; }
方案二:使用table布局
// html // 需要在外面套一层aaa// css .wrap { display: table; } .content { font-size: 10px; display:table-cell; vertical-align: center; }
输入框 focus 以后,软键盘遮挡输入框的情况
尝试 input 元素的 scrollIntoView 进行修复。
// 安卓手机,键盘挡住输入框 if (/Android/gi.test(navigator.userAgent)) { window.addEventListener("click", function () { try{ if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") { var inputType = document.activeElement.type; if(inputType == "checkbox") return; setTimeout(function() { document.activeElement.scrollIntoView(true); }, 0) } }catch(e){ console.log("安卓兼容键盘挡住输入框报错", e); } }) }
fixed+Input
原因:ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位。在某些安卓机下,键盘弹起会引起窗口高度(html标签的高度)变小,而fixed定位是相对于html根元素的,所以会被顶上来了。
方案一:弹起软键盘的时候,把fixed定位的元素改成block,回归文档流,当输入框失去焦点时,又变成fixed定位,还要把滚动条距离记录下。
var screenHeight = document.body.offsetHeight; // 获取视图原始高度 window.onresize = function(){ if (document.body.offsetHeight < screenHeight) { document.getElementsByTagName("nav")[0].style.display = "none"; }else{ document.getElementsByTagName("nav")[0].style.display = "block"; } };
方案二:iscroll能较好地处理fixed滚动的问题。
禁止蒙层底下页面跟随滚动
原因:弹窗是常见的交互方式,而蒙层是弹窗必不可少的元素。但是,在蒙层元素过长滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动。这是因为触发了冒泡,使得父元素跟着滚动。
方案:很简单,防止出现冒泡即可。设置滚动容器和弹窗为同级节点。
// css #root{ height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/106357.html
摘要:工作一年多了,相信在座的各位前端也都跟我一样,对在手机上,特别是上出现的各种兼容性感到非常头疼。这篇文章仅作为一份记录供大家参考。我们可以在这个代码的基础上加上媒体查询来完善它 工作一年多了,相信在座的各位前端也都跟我一样,对在手机上,特别是iphone上出现的各种兼容性感到非常头疼。这篇文章仅作为一份记录供大家参考。 如何画出 1px 的线? 首先问大家一个问题,如何在iphone上...
摘要:移动端失效需求点击一个,让某一个聚焦并弹出虚拟键盘。安卓可以聚焦,但是不会弹出虚拟键盘说明安卓机的表现也是异常的无法聚焦,也不会弹出虚拟键盘所以我的这边的实践结论是,如果希望在页面初始化过程中,让自动聚焦并弹出虚拟键盘。 移动端IOS遇到的兼容性问题 和 Mac联机调试方法 有时候遇到一些移动端「疑难杂症」,因为移动端不方便调试,可能找不到问题点,所以经常需要电脑端和移动端联机调试,...
摘要:闭包能用来实现私有化和创建工厂函数等作用。关于闭包的常见面试题是这样的写一个函数,循环一个整数数组,延迟秒打印这个数组中每个元素的索引。 文章来源:http://mp.weixin.qq.com/s/vs0... 前言 在公众号上看到了这篇文章,觉得很有用,有助于理解JS学习中的一些重点难点。决定把它整理下发布出来。该文章主要介绍了JS中的三个问题。在以后的几篇文章里,我会详细介绍这三...
摘要:而之后事件循环一直会去遍历任务队列,一旦有任务放入就会放入主线程中执行。任务队列所谓任务是返回的一个个通知,让主线程在读取任务队列的时候得知这个异步任务已经完成,下一步该执行这个任务的回调函数了。 javascript单线程 浏览器端,复杂的UI环境会限制多线程语言的开发。例如,一个线程在操作一个DOM元素时,另一个线程需要去删除DOM元素,这个之间就需要进行状态的同步,何况前端可能不...
阅读 2263·2023-04-25 16:42
阅读 1163·2021-11-22 14:45
阅读 2314·2021-10-19 13:10
阅读 2806·2021-09-29 09:34
阅读 3375·2021-09-23 11:21
阅读 2069·2021-08-12 13:25
阅读 2151·2021-07-30 15:15
阅读 3471·2019-08-30 15:54