Why is 1px thicker
I believe that friends who write on the mobile terminal will find that 1px in the mobile terminal css looks thicker. This is because
the pixels recorded in the css are logical pixels, and what the designer requires is the physical pixel of the device.
There is a proportional relationship between them, which can be obtained using js orwindow.devicePixelRatio media query . -webkit-min-device-pixel-ratioOf course, the ratio is related to the equipment. The border on the mobile phone can't achieve the effect my mother wants. This is because of devicePixelRatiothe feature, the IPhone devicePixelRatio== 2, and border-width: 1px describes the independent pixel of the device, so the border is enlarged to the physical pixel 2px display, and it appears on the IPhone thicker.
Mobile development often needs to add the following sentence in the header of html:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
This sentence defines that the width of the viewport of this page is the device width, the initial zoom value and the maximum zoom value are both 1, and the user is prohibited from zooming
If and resolved
media query
Media query scales with device pixel ratio, setting decimal pixels
.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 }
}
Disadvantages: requirements for equipment, poor compatibility
Using box-shadow and transfrom
.opeixel {
position: relative;
top: 50px;
width: 300px;
}
.opeixel::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 300px;
box-shadow: 0 0 1px #666;
transform-origin: 0 bottom;
transform: scaleY(.5) translateZ(0);
}
/* 设备像素比不小于2 */
@media(min-resolution: 2dppx) {
.shadow::after {
box-shadow: 0 0 0 .5px #666;
}
}
/* 设备像素比不小于3 */
@media(min-resolution: 3dppx) {
.shadow::after {
box-shadow: 0 0 0 0.333333px #666;
}
}
<span class="opeixel shadow"></span>