移动端兼容性
累了你就写会代码吧
越自律,越自由
展开
-
解决移动端适配1px问题
核心思路:在web中,浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr,在css中可以使用媒体查询min-device-pixel-ratio区分dpr。我们根据这个像素比,来算出他对应大小,但是暴露个非常大的兼容问题暴露的问题:Chrome把0.5px四舍五入变成了1px,而firefox/safari能够画出0.5px,Chrome会把小于0.5px的当成0,而Firefox会把不小于0.55px当成1px,Safari是把不小于0.75px当成1px,进一步原创 2021-10-11 14:28:22 · 308 阅读 · 0 评论 -
在安卓手机上面使用window.location.href失效的问题
问题:在低版本的安卓手机中使用window.location.href跳转失效解决思路1:分析:在跳转链接后面添加时间戳,因为考虑到是低版本可能存在缓存的问题所以采用在跳转链接后面添加动态的参数时间戳来刷新缓存的数据// 在跳转链接后面添加时间戳,因为考虑到是低版本可能存在缓存的问题所以采用在跳转链接后面添加动态的参数时间戳来刷新缓存的数据window.location.href = url+'?time='+((new Date()).getTime());解决思路2:分析: 在采用上面的方原创 2021-06-22 10:46:01 · 5676 阅读 · 0 评论 -
ios使用transform的时候圆角变方框,border-radius失效问题
背景:ios使用transform的时候圆角变方框,border-radius失效原因:在设置border-radius的同时,给元素添加了 css3的transform动画导致设置border-radius失效解决方法:在使用border-radius的元素上面同时设置属性-webkit-transform:rotate(0deg);...原创 2021-06-22 10:33:39 · 628 阅读 · 0 评论 -
h5页面解决ios滚动条生涩,不能滚动的问题-react篇
背景:h5页面有滚动条的场景,在ios手机或者微信上面滚动显得生涩css解决: -webkit-overflow-scrolling:touch; -webkit-text-size-adjust:none;场景 页面有两层滚动条嵌套,(页面滚动,并且弹窗滚动条也可以滚动)解决思路:弹窗出现时候页面fixed定位,弹窗上面滚动条通过获取原生属性scrollTop设置为0,默认滚动条在最顶部react解决: this.scrollBox = React.createRef() this原创 2021-06-20 14:59:31 · 1529 阅读 · 0 评论 -
原生js解决ios手机input输入框弹出覆盖问题
背景:软键盘弹起挡住input框软键盘弹起页面布局乱掉安卓手机 + 界面父级组件使用了overflow: hidden 导致键盘弹出(页面本质上变小了)仍然不可滚动解决思路:父级别不要使用overlow:hidden 或者 键盘弹起的时候去掉overflow: hidden.总之要确保键盘弹起的时候页面仍然可以拖动。 不然界面很容易乱实现原生js方法(function() { window.addEventListener("resize", function() { if原创 2021-05-17 14:58:31 · 666 阅读 · 0 评论 -
移动端兼容性问题-css篇
scroll元素滑动,ios滑动比较生涩 解决办法:给父类设置-webkit-overflow-scrolling:touchiphone及ipad下输入框默认内阴影 解决办法: 设置样式 -webkit-appearance:none;IOS 在点击div的时候会出现黑灰色背景块-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);ios 长按出现拷贝、复制等菜单选项-webkit-t原创 2021-05-17 14:52:57 · 1268 阅读 · 0 评论 -
window.scrollTo方法的兼容性处理
在使用原生js,window.scrollTo()方法的时候安卓或者ios会存在兼容性问题导致window.scrollTo()不能够生效,添加下面代码var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;window.scrollTo(0, 0);注意:使用的时候需要dom结构加载完再使用该方法,否则该方法仍然可能失效...原创 2021-04-28 09:54:06 · 3567 阅读 · 0 评论 -
常见移动端兼容问题以及解决方案
在这里插入代码片## IOS上click点击事件会有300ms的延迟响应:换用zepto的touch模块,tap事件也是为了解决在click的延迟问题或者引入fastclick.js解决移动端页面滚动滞涩感css在body元素上添加-webkit-overflow-scrolling: touch;软键盘与输入框问题h5页面有个问题就是,当输入框在最底部,点击软键盘后输入框会被遮挡。可采用如下方式解决:var oHeight = $(document).height(); //浏览器当前的原创 2021-01-21 17:47:57 · 4560 阅读 · 12 评论 -
移动端适配问题,华为手机页面展示变宽,内容展示不全?
1、检测微信内置浏览器 重置fontSize 大小 (function () { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { document.addEventListener("WeixinJSBridgeReady", handleFontSize原创 2021-01-21 14:58:25 · 1847 阅读 · 0 评论 -
处理iOS 微信客户端弹窗状态下调起输入法后关闭输入法页面元素错位解决办法
问题:在iOS手机微信端上面有input输入框。获取input输入内容正常。当失去input输入框焦点的时候发现页面元素错位,不能恢复。解决方案:// 处理iOS 微信客户端弹窗状态下调起输入法后关闭输入法页面元素错位解决办法var ua = window.navigator.userAgent.toLowerCase();if (/iphone|ipod|ipad/i.test(navigator.appVersion) && /MicroMessenger/i.test(ua))原创 2021-01-27 21:17:48 · 506 阅读 · 0 评论