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％）。

支持细节：我对此做了大量研究，看来这是由于子像素渲染造成的。我阅读了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

我在Firefox中遇到类似的事情，所以也许你可以根据自己的需要调整我的修复程序。

我的问题是我需要在changePage期间计算屏幕宽度，这在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,

当错误发生时，这给了我17px，当它没有时，这给了我0，所以我可以放心地做

element_width = calculatedWidth + fireFoxCorrection

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

Answer 2

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

经过大量（痛苦）搜索Webkit文档后，不正确的SubPixel处理是一个记录良好的错误，需要修复以使这些类型的问题永久消失。我能找到的唯一确定的解决方法是负像素边距修复。 This qusetion详细介绍了此事。

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

干杯。

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

2 个答案: