0

セットアップ: jQuery Mobile を使用して、iOS および Android 用の PhoneGap/Cordova アプリを開発しています。このアプリには、プラグインを徹底的に検索しても私のニーズをすべて満たす結果が得られなかったという事実のために、私が自分で作成しているカレンダーが必要です。私は 7 つの div (曜日ごとに 1 つ) を使用しています。これらはすべて100% の 1/7 にfloat:left設定されています。width:14.28571428571429%カレンダー div コンテナーが に設定されていることに注意してくださいwidth: 100%。Chrome 開発者ツールは、コンテナー (id="calendar") が幅の領域を 100% 使用していることも確認しています。

問題:デスクトップではすべてがうまく機能しますが、iPhone または iPad でテストを開始すると、カレンダーの右側にわずかな余白 (約 2%) が表示されます。

裏付けとなる詳細:私はこれについてかなりの調査を行いましたが、これはサブピクセル レンダリングが原因であると思われます。WikiPedia でSubpixel Renderingについて読み、さまざまなブラウザーがピクセルの一部を処理する方法に関するこの 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 -->
4

2 に答える 2

0

これにつまずいた人のために：

Webkit ドキュメントを (骨の折れる) 検索した結果、不適切な SubPixel 処理は十分に文書化されたバグであり、この種の問題を完全に解決するには修正する必要があります。私が見つけることができる唯一の確実な回避策は、負のピクセル マージンの修正です。 この質問は、この問題についてかなり詳しく説明しています。

7 列に関する私の特定の問題に関しては、7 列のそれぞれにある負のピクセルが画面の右側にマージンを作成していました。私を修正したのは、負のマージンを他のすべての列にのみ適用するという考えでした. したがって、列 0、2、4、および 6 にはすべて a がmargin-left: -1pxあり、他の 3 つにはありません。今のところうまくいっていますが、彼らがこの問題に遅かれ早かれ対処できるようになることを願いましょう。

乾杯。

于 2012-11-15T20:39:36.143 に答える
0

私は Firefox で似たようなものを使ってひどい時間を過ごしているので、あなたのニーズに合わせて私の修正を当てはめることができるかもしれません。

私の問題は、changePage 中に画面幅を計算する必要があることです。Firefox では、幅の計算でスクロールバーが差し引かれることがあるため、幅 1000px が必要な場合は 983px (sans 17px scrollbar) になります。

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。差を抽出できれば、それを要素で割り、これを各要素の幅として追加できます。

于 2012-11-10T09:06:17.177 に答える