Javascript 我如何修复或解决iPhone上的亚像素处理？

设置：我正在使用jQuery Mobile为iOS和Android开发PhoneGap/Cordova应用程序。该应用程序需要一个日历，我自己创建的，因为对插件的彻底搜索并没有产生任何满足我所有需求的结果。我使用了七个div，一周中的每一天一个，都是

float:left

'd，每个都设置为

width:14.28571428571429%

，因为这是100%的1/7。我应该提到，calendar div容器设置为

width:100%

。Chrome developer tools还确认容器（id=“calendar”）使用100%的宽度不动产

问题：桌面上的一切看起来都很棒，但一旦我开始在iPhone或iPad上进行测试，日历的右边就会出现一小部分空白（约2%）

支持细节：我对此做了大量研究，似乎这是由于亚像素渲染。我读到并发现了不同浏览器处理像素分数的方式。在我看来，在移动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 -->

[&hellip；]

我在Firefox中遇到了类似的问题，所以也许你可以根据需要调整我的补丁

我的问题是，我需要在更改页面时计算屏幕宽度，在Firefox上，这有时会导致滚动条在宽度计算中被减分，因此如果我需要宽度1000px，我得到的是983px（sans 17px滚动条）

花了很长时间来处理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,

---

如果您可以使用

window.innerWidth

和

document.body.clientWidth

在设置中确定更正，那么试一试如何。如果可以提取差异，可以将其除以元素，并将其添加到每个元素的宽度中。

对于任何偶然发现此差异的人：

在对Webkit文档进行了大量（痛苦的）搜索之后，不正确的亚像素处理是一个有很好文档记录的错误，需要进行修复，以使这些类型的问题永久消失。我能找到的唯一可靠的解决方法是负像素边界修复。对这件事进行了详细的讨论

关于我关于七列的特别问题，七列中的每一列都有一个负像素，在屏幕的右侧创建了一个边距。使我固定下来的是只将负边距应用于其他列的想法。因此，现在列0、2、4和6都有一个

左边距：-1px

，其他三个没有。它现在起作用了，让我们希望他们能够尽快解决这个问题

---

干杯。

如果我能找到时间，这个周末我将尝试设置一个。我已经设置了一个JSFIDLE来说明我遇到的问题：通过桌面查看时，一切看起来都很好。在iOS上查看时，请注意行的右侧有大约2%的边距。我错了-同样的问题也发生在桌面Safari上。谢谢，@frequency。不幸的是，我已经确定window.innerWidth==document.body.clientWidth。这些值在我的Chrome浏览器（桌面）以及iPhone和iPad中被报告为相等。我应该提到的是，这破坏了在非Webkit浏览器上的渲染。只是一个提醒。

element_width = calculatedWidth + fireFoxCorrection