JS处理
首先,可以通过 window.devicePixelRatio
拿到设备的像素比,然后给 html
标签加上的相应的样式。
function retina () { // 高分辨率屏幕处理 if (navigator.userAgent.toUpperCase().indexOf('IPHONE OS') !== -1) return; // IOS会缩放,不处理 var classNames = []; var pixelRatio = window.devicePixelRatio || 1; classNames.push('pixel-ratio-' + Math.floor(pixelRatio)); if (pixelRatio >= 2) { classNames.push('retina'); } var html = document.getElementsByTagName('html')[0]; classNames.forEach(function (className) { html.classList.add(className); }); }
这样一来我们可以通过, html.pixel-ratio-2
给不同分辨率的屏幕加上特殊的样式
单个边的1px方案
由于andorid不能设置0.5px像素的边框,所以需要通过伪元素来模拟边框,先使伪元素的高度为1px,然后使用transform: scale(.5)
缩小相应的大小即可。具体实现代码如下:
.item {
position: relative;
&:before{
content: ''; position: absolute; left: 0; top: 0; bottom: auto; right: auto; width: 1px; height: 100%; padding: 0px; color: green;">@color; display: block; z-index: 1; html.pixel-ratio-2 & { .transform(scaleX(0.5)); } html.pixel-ratio-3 & { .transform(scaleX(0.33)); } } }
然后不同方向的边框,只需要跳转伪元素的位置和缩放位置即可。该实现方案来自Framework7
终极解决方案:
参考有赞的vant 解决方案: https://github.com/youzan/vant/blob/dev/packages/style/hairline.less
参考:
https://www.cnblogs.com/libin-1/p/6639310.html
https://www.w3cplus.com/css/fix-1px-for-retina.html