如何修复或解决 iPhone 上的子像素处理问题？

Question

设置： 我正在使用 jQuery Mobile 为 iOS 和 Android 开发一个 PhoneGap/Cordova 应用程序。该应用程序需要一个我自己创建的日历，因为详尽搜索插件并没有产生任何满足我所有需求的结果。我正在使用七个 div - 一个用于一周中的每一天 - 它们都是 float:left'd 并且每个都设置为 width:14.28571428571429%，因为这是 100% 的 1/7。我应该提到日历 div 容器设置为width: 100%。 Chrome 开发者工具还确认容器 (id="calendar") 正在使用 100% 的宽度空间。

问题：一切在桌面上看起来和运行都很好，但是一旦我开始在我的 iPhone 或 iPad 上进行测试，日历右侧会出现一小部分（大约 2%）。 p>

支持细节：我对此进行了相当多的研究，看来这是由于亚像素渲染造成的。我阅读了Subpixel Rendering on WikiPedia 并发现this two year old article 关于不同浏览器处理小数像素的方式。在我看来，移动 Safari 中 0.28[…]% 被砍掉了。 问题是，我不知道如何解决。 更让我困惑的是，这似乎是一个 webkit 问题，但日历渲染得很好在桌面 Chrome 中。

代码：

<div id="calendar">

    <div class="cal-week"> 

        <a href="javascript:monthPrev();">
            <div class="day day-inactive">28</div>
        </a>

        <a href="javascript:monthPrev();">
            <div class="day day-inactive">29</div>
        </a>

        <a href="javascript:monthPrev();">
            <div class="day day-inactive">30</div>
        </a>

        <a href="javascript:monthPrev();">
            <div class="day day-inactive">31</div>
        </a>

        <a href="javascript:selectDate(11,01,2012);">
            <div class="day">1</div>
        </a>

        <a href="javascript:selectDate(11,02,2012);">
            <div class="day">2</div>
        </a>

        <a href="javascript:selectDate(11,03,2012);">
            <div class="day">3</div>
        </a>

        <div class="clearfix"></div>
            <!-- fun fact: this is the first week of November, 2012 -->

    </div>

[&hellip;]

</div><!-- /calendar -->

Answer 1

对于任何偶然发现此问题的人：

在对 Webkit 文档进行大量（痛苦的）搜索之后，不正确的 SubPixel 处理是一个有据可查的错误，需要修复以使这些类型的问题永久消失。我能找到的唯一确定的解决方法是负像素边距修复。 This qusetion 详细介绍了这件事。

关于我的七列问题，七列中的每一列都有一个负像素在屏幕右侧创建一个边距。固定我的是只将负边距应用于每个其他列的想法。所以现在第 0、2、4 和 6 列都有margin-left: -1px，而其他三列没有。它现在有效，我们希望他们能尽快解决这个问题。

干杯。

Answer 2

我在 Firefox 中遇到了类似的问题，所以也许您可以根据您的需要调整我的修复程序。

我的问题是/是我需要在 changePage 期间计算屏幕宽度，这在 Firefox 上有时会导致滚动条在宽度计算中被减去，所以如果我需要宽度 1000 像素，我会得到 983 像素（没有 17 像素滚动条） .

处理 Javascript 返回的错误值需要很长时间。我现在正在使用它来修复：

wrapWidth = document.body.clientWidth,
// FIREFOX SCROLLBAR WIDTH FIX
// When caluclating the width of the screen Firefox includes 
// the scrollbar width although the page height is less 
// than available screen height. 
// Therefore page width is off by the toolbar width (17px).
// browser window: window.innerWidth  ~ e.g. 924
// wrapper page: document.body.clientWidth ~ e.g. 907

// if the page height is smaller than screen height, correct by 17px. 
fireFoxCorrection = ( window.innerWidth !== wrapWidth && wrap.height() <= window.innerHeight ) ? window.innerWidth-wrapWidth : 0,

当错误发生时这给了我 17px 和没有时给我 0，所以我可以安全地做

element_width = calculatedWidth + fireFoxCorrection

如果您可以使用window.innerWidth 和document.body.clientWidth 确定您的设置中的更正，试试如何。如果可以提取差异，则可以将其除以元素并将其添加到每个元素的宽度。