Compatibility of mobile display frame

Border1 pixel problem
For example:
HTML:

<div class="content  border-1px"></div>

css:

.border-1px{
  position: relative;
}
.border-1px:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-1px:before {
    right: -100%;
    bottom: -100%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .border-1px:before {
    right: -200%;
    bottom: -200%;
    -webkit-transform: scale(0.333333);
    transform: scale(0.333333);
  }
}
.content:before{
  border: 1px solid red;
}

Effect:

Read More: