0

设置： 我正在使用 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%）。

支持细节：我对此进行了相当多的研究，似乎这是由于亚像素渲染造成的。我在 WikiPedia 上阅读了关于 Subpixel Rendering 的内容，发现这篇两年前的文章是关于不同浏览器处理小部分像素的方式的。在我看来，移动 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 -->
4

2 回答 2

0

我在 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如果您可以使用and来确定您的设置中的更正，如何尝试document.body.clientWidth。如果可以提取差异，则可以将其除以元素并将其添加到每个元素的宽度。

于 2012-11-10T09:06:17.177 回答
0

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

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

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

干杯。

于 2012-11-15T20:39:36.143 回答