如何在SubPixel上修复或处理iPhone？

Question

安装：我正在使用jQuery手机为iOS和安卓开发一个PhoneGap/Cordova应用程序。该应用程序需要一个日历，我正在创建自己，因为一个事实，彻底搜索插件没有产生任何结果，以满足我的所有需要。我使用的是7个div (一周中每天一个)，它们都是float:leftd，每个都设置为width:14.28571428571429%，因为这是100%的1/7。我应该指出，日历div容器设置为width: 100%。Chrome工具还确认容器(id=“日历”)使用的宽度为房地产宽度的100%。

问题： Everything在桌面上看起来和工作都很棒，但是一旦我开始在我的iPhone或iPad上进行测试，一个很小的空白(约2%)出现在日历的右边。

支持细节：我已经对此做了大量的研究，这似乎是亚像素渲染的结果。我读到了关于基于WikiPedia的亚像素渲染的文章，发现了关于不同浏览器处理像素分数的方法的这篇有两年历史的文章。在我看来，0.28…%在移动Safari中被砍掉。的问题是，我不知道如何修复它。让我更加困惑的是，这似乎是一个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处理是一个有良好文档的错误，需要进行修复，以使这些类型的问题永久消失。唯一可以肯定的是，我能找到的是一个负像素边缘修正。本题在这件事上讲了一些很好的细节。

关于我关于七列的具体问题，七列中的每一列上都有一个负像素，在屏幕的右边创建了一个边距。唯一能解决我的问题是，只对其他每一列都使用负面的页边距。因此，现在第0、2、4和6列都有一个margin-left: -1px，而其他三列则没有。就目前而言，让我们希望他们能尽早解决这个问题。

干杯。

Answer 2

我在Firefox中遇到了一些类似的问题，所以也许您可以安装我的修补程序来满足您的需要。

我的问题是/我需要在changePage期间计算屏幕宽度，这有时会导致滚动条在宽度计算中被减缩，所以如果我需要宽度1000‘m，我将得到983’m (sans 17‘m滚动条)。

它花了很长时间来安慰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,

这给了我错误发生时的17 so和没有错误时的0，所以我可以安全地完成

element_width = calculatedWidth + fireFoxCorrection

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