移动端视网膜（Retina）屏幕下如何解决网页中1px显示问题？

苹果发布iPhone6（375x667，devicePixelRatio：2）、iPhone6 plus（414x736，devicePixelRatio：3）等Android机型分辨率如何处理兼容最优。

- 手机淘宝的flexible设计与实现
- A tale of two viewports
- REMs And Viewport Measurements
- Configuring the Viewport
- CSS Media Queries for iPads & iPhones

回复内容： 可以用1px尺寸的带背景色元素然后scaleX(0.5)或scaleY(0.5)实现0.5px效果。

比如要实现一个元素的下边框1px效果：

  .item   { 
     position  :   relative  ; 
 } 
 .item  :after   { 
     content  :   ''  ; 
     display  :   block  ; 
     position  :   absolute  ; 
     width  :   100%  ; 
     left  :   0  ; 
     bottom  :   0  ; 
     height  :   1px  ; 
     background-color  :   #c8c7cc  ; 
     -  webkit  -  transform  :   scaleY  (  0  .  5  ); 
     transform  :   scaleY  (  0  .  5  ); 
 } 
  

一，border-width:.5px


二， linear-gradient
手机答题，待会再补详细的。
有几种方案，一种是用图片：2像素，一个透明的，一个目标颜色，可结合border-image与base64玩。
另外一种不同于@张云龙的scale原理，采用目标元素的整体缩小一半，再加上原大小的写法。
还有是通过控制viewport缩小为0.5来实现全局的原大小
还有一些忘了。。 实现的方式有很多种:
background-image (border-image) scale(0.5) box-shadow 写了一篇文章 Retina 屏幕下的 1px 边框 | XINRAN LIU 介绍了每一种实现方式的代码(CSS 和 Stylus), 优缺点等, 还有一些原理的介绍, 可以参考一下哦~

查看更多关于移动端视网膜（Retina）屏幕下如何解决网页中1px显示问题？的详细内容...