border设置1px在手机上看起来不止1像素怎么解决啊？

Question

似乎手机不同显示的宽度还不一样？

Answer 1

看起来不像，这种东西怎么能用感觉呢？推荐你把屏幕截屏然后放入ps中查看，看看是否如你想的一样不是1px。

• 如果是错觉的话那没什么，我做前端的，具体好像也没碰到过。
• 如果不是的话你打开chrome或者别的游览器的兼容手机调试下，看看

Answer 2

由于高清屏的特性，1px是由2×2个像素点来渲染，border:1px在Retina屏下会渲染成2px的边框
实现方式
1.图片
2.阴影
3.缩放

Answer 3

移动端（手机）上1像素px边框的实现方法，这里只是列出一种，自认为比较合理的方法，有其他的移动端（手机）上1像素px边框的实现方法您可以分享出来

1像素边框，在2倍屏幕上为2“占位”，3倍屏上为3“占位”，但设计师就要1“占位”

.content h1:after,
.content h2:after {
    border-top: 1px solid #bfbfbf;
    content: ' ';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: left bottom;
}

/* Retina 适配 */

@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
    .content h1:after,
    .content h2:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 三倍屏 适配 */

@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min--moz-device-pixel-ratio: 2.5),
only screen and (-o-min-device-pixel-ratio: 250/100),
only screen and (min-device-pixel-ratio: 2.5) {
    .content h1:after,
    .content h2:after {
        -webkit-transform: scaleY(0.33333334);
        transform: scaleY(0.33333334);
    }
}

答案非原创，来自网络。楼主活用搜索引擎 可以解决很多问题的