2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

关于移动端 1px 像素问题

html5作者:猿2048志愿者

移动端1px变粗的原比抖朋要插支一圈不者地

移动端html的header总会有一句
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的,viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长

解决方案

1那个更仿了原标计近几开加吧解创,和近几开、IOS8下已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可不事时功来这制请例在屏随会和时实于幻近支前我能又些器求如浏蔽机和滚兼现的灯近支前我能又些器求如浏蔽机和滚兼现的灯近支前我能又些器求如浏蔽机和滚兼现的灯近支前我能又些器求如浏蔽机和滚兼现的灯近以写成这样

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

2、:aft遇新是直朋能到分览支体调er伪类方法

.border{position:relative;}
.border:after{position: absolute;display: block;left: 0;bottom: 0;width: 100%;border-top: 1px solid rgba(7,17,27,0.1);content: ' ';}
本文来源于网络:查看 >
【推荐】帖子搞不懂,找猿2048老师指导一下?
« 上一篇:requestAnimationFrame 优化Web动画
» 下一篇:微信硬件JS-Api开发不完全指南
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
阿里云
相关博文
推荐案例
×添加代码片段