css样式部份
<style>
*{
margin: 0;
padding: 0;
}
.test{
height:1px;
width:100%;
background-color: #000;
margin-top: 30px;
}
/*当像素比dpr为2的时候 console.log(window.devicePixelRatio)*/
@media only screen and (-webkit-device-pixel-ratio: 2) {
.test{
transform: scaleY(.5);
}
}
/*当像素比dpr为3的时候 */
@media only screen and (-webkit-device-pixel-ratio: 3) {
.test{
transform: scaleY(.333333333333333);
}
}
</style>
html结构部份
<body>
<div class="test"></div>
</body>