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

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

php中文网

发布： 2016-06-07 08:42:48

原创

1596人浏览过

苹果发布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效果：

<span class="nc">.item</span> <span class="p">{</span>
    <span class="k">position</span><span class="o">:</span> <span class="k">relative</span><span class="p">;</span>
<span class="p">}</span>
<span class="nc">.item</span><span class="nd">:after</span> <span class="p">{</span>
    <span class="k">content</span><span class="o">:</span> <span class="s1">''</span><span class="p">;</span>
    <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span>
    <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span>
    <span class="k">left</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="k">bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="k">height</span><span class="o">:</span> <span class="m">1px</span><span class="p">;</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="m">#c8c7cc</span><span class="p">;</span>
    <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">transform</span><span class="o">:</span> <span class="n">scaleY</span><span class="p">(</span><span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">);</span>
    <span class="n">transform</span><span class="o">:</span> <span class="n">scaleY</span><span class="p">(</span><span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">);</span>
<span class="p">}</span>

登录后复制

一，border-width:.5px

二， linear-gradient

手机答题，待会再补详细的。
有几种方案，一种是用图片：2像素，一个透明的，一个目标颜色，可结合border-image与base64玩。
另外一种不同于@张云龙的scale原理，采用目标元素的整体缩小一半，再加上原大小的写法。
还有是通过控制viewport缩小为0.5来实现全局的原大小
还有一些忘了。。实现的方式有很多种: