移动端1像素的解决方案？

最新推荐文章于 2023-08-25 10:00:25 发布

爱上猫的程序猿

最新推荐文章于 2023-08-25 10:00:25 发布

阅读量136

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/tang18533952786/article/details/129040048

版权

文章介绍了三种处理小数值像素在高分辨率屏幕显示问题的方法：1)使用JavaScript检测设备像素比并动态调整；2)创建渐变背景模拟1px边框；3)结合viewport和rem调整缩放比例。每种方法有其优缺点，第一种兼容性较差，后两种提供更灵活的解决方案。

摘要由CSDN通过智能技术生成

1、小数值px

解决思路：

<body>
	<div id="main" style="border: 1px solid #000000;"></div>
</body>
<script type="text/javascript">
if (window.devicePixelRatio && devicePixelRatio >= 2) {
	var main = document.getElementById('main');
	main.style.border = '.5px solid #000000';
}
</script>

优点：

简单，好理解

缺点：

兼容性差，目前之余IOS8+才支持，在IOS7及其以下、安卓系统都是显示0px。

2、background-img渐变

设置1px的渐变背景，50%有颜色，50%透明

.border {
    background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top    left  / 100% 1px no-repeat,
    linear-gradient(90deg,  black, black 50%, transparent 50%) top    right / 1px 100% no-repeat,
    linear-gradient(0,      black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left  / 1px 100% no-repeat;
}

3、viewport和rem结合

viewport结合rem解决像素比问题

比如在devicePixelRatio=2设置meta

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
在devicePixelRatio=3设置meta

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

爱上猫的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端1像素的解决方案？

比如在devicePixelRatio=2设置meta。设置1px的渐变背景，50%有颜色，50%透明。viewport结合rem解决像素比问题。2、background-img渐变。3、viewport和rem结合。
复制链接

扫一扫