大家好,又见面了,我是你们的朋友全栈君。
此博客仅为个人开发整理笔记。
- IOS手机测试时会发现加了margin-bottom的属性无效。解决:替换为padding-bottom或者放个空盒子有高度宽度占位即可。
- IOS手机的输入框出现未知的内阴影。解决:input: {-webkit-appearance: none;}
- 控制手机上方的标题:document.title;
- canvas画出来的内容模糊问题。解决:canvas问题解决
- new Date的ios兼容问题:当使用new Date(‘2020-1-20’)这种方法的时候安卓和PC端都是没问题的,IOS手机不支持,IOS支持new Date(‘2020/1/20’)
- font-weight: 兼容问题【在不同手机和浏览器上的效果不一致】
- 移动端1px问题【有些机型显示的边框实际比1px粗一些】:
dpr(devicePixelRatio)
dpr = 设备物理像素/设备独立像素
什么是设备物理像素,什么是设备独立像素,这些都不重要(详细讲解参考https://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/),重要的是你需要知道:
dpr = 设备实际显示的像素比/css像素比
比如css像素为1,设备的dpr为2,那么屏幕上实际显示的像素就是css像素*dpr,也就是2px。
其中dpr可以通过css或者js查询出来,知道了css像素与实际显示像素的缩放比,那么就可以利用transform: scale()对1px进行缩放。
2.利用dpr适配1px
知道了什么是dpr,那么如何让利用dpr来适配1px呢。
css实现(以下边框为例):
css中可以利用media查询dpr
解决代码:
.scale-1px {
position: relative;
border: none; &:after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 1px;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.scale-1px:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.scale-1px:after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152723.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...