随笔分类 - 兼容(compatibility)
web开发少不了兼容问题的存在，兼容问题在开发中也是一个难点！
摘要：情景：白色透明度显示了深色 分析：最开始以为手机兼容问题，该浏览器不支持 rgba，后来向安卓开发工程师请教了一下，尝试了改变颜色的写法，效果不对，安卓工程师调节了手机的黑色模式，颜色恢复到正常。原因是该手机设置了黑色模式，白色透明度在黑色模式下显示纯黑。 解决：可以使用纯色代替使用 rgba
阅读全文
摘要：问题一： 使用百度APP打开H5页面，发现使用position: fixed定位在页面上的按钮显示出来后又消失了，原因是百度对position: fixed的标签，如果其中带有<img>标签会被定义成广告，进而给移除了。 解决方法： 将按钮切成图片，放到伪类中使用 background-image:
阅读全文
摘要：Can I use display: flex; ie6-9不支持，ie11,10部分支持 placeholder 背景属性值：background-size: cover|contain；ie8及以下不支持 兼容ie7样式注意： 1.rem不支持； 2.CSS3不支持（transition动画位移
阅读全文
摘要：将其他时区格式的时间转化为常规Date格式（中国标准时间），同时转正时区 var time = '2020-12-30T11:29:20.000+0000' var data = time.substr(0, 19); var newDate = new Date(new Date(data.rep
阅读全文
摘要：在做响应式网站中，背景视频，PC端视频自动播放，移动端使用图片替换，样式使用的是媒体查询控制显示隐藏 @media screen and (max-width: 768px){video {display: none;}} problem: 在iOS设备上的百度浏览器，刚进入页面自动放大video,
阅读全文
摘要：iphonex 提供的 meta 头 页默认不添加扩展的表现是 viewport fit=contain，需要适配 iPhoneX 必须设置 viewport fit=cover，这是适配的关键步骤 contain 可视化窗口完全包含网页内容 cover 网页内容完全覆盖 auto 默认值和 con
阅读全文
摘要：1. safari input框type["password"] type["text"] 聚焦后右侧出现图标 input::-webkit-credentials-auto-fill-button , // password input::-webkit-contacts-auto-fill-bu
阅读全文
摘要：下方图片中的按钮下面大片空白就是手机软键盘没有折回出现的，如果在软键盘没有恢复就点击按钮进行操作，页面按钮失效，页面卡顿不能操作了，所以影响还是很大的，查询过原因是因为微信改版出现了这种现象。 解决方式参考： //键盘收起以后页面缩回 $(".form input").on("blur",funct
阅读全文
摘要：在微信公众号开发的时候在使用【alert/confirm】弹出提示或者警告信息的时候，【alert/confirm】会将该公众号的网址显示出来，这样很不美观。所以很多时候我们会选择去除那个网址提示内容。解决方法如下： 重写alert //微信浏览器中，aler弹框不显示域名 //先判断是否为微信浏览
阅读全文
摘要：微信浏览器在版本6.7.4及以上会有这个bug：页面的input唤醒软键盘再收起后，页面会出现软键盘高度的空白背景，触摸到滚动条会消失恢复！ 解决代码 后台框架嵌入iframe的情景，iframe内部页面输入框唤醒软键盘，控制顶层window滚动 var wechatInfo = navigator
阅读全文
摘要：获取时间戳：时间格式为：2019-3-21 12:00:00 在Safari获取时间戳有兼容性问题，需要转换成 2019/3/21 12:00:00 才可以正确获取到时间戳 ```js var getTime = function(time){ var myDate = new Date(time)
阅读全文
摘要：实际项目开发中，iframe在移动设备中使用问题还是很大的，说一说我的那些iframe坑 做过的这个后台管理框架，最开始的需求是PC，但随着业务需要，需要将项目兼容到ipad，后台的框架也是使用的开源框架开发，使用的是iframe嵌套页面的方式 1、内部嵌入iframe，里面的内容页面中有绝对定位的
阅读全文
