0

編集：答えを見つけました。以下の私の答えを参照してください。

私は、将来自分のWebサイトに統合するさまざまなレスポンシブグリッドフレームワークを使用して水域をテストしていました。

Bootstrap（大勢のフォロワー、頻繁に更新）から始めましたが、モバイルデバイスでテストするときに問題が発生しました。

最初にhttp://screenqueri.esで試してみましたが、すべてが正常に見え、次にiPhone/iPadで試しました。これもすべて正常に見えました。

次に、友人にSamsung GT I9000 Galaxy Sを試してみるように頼みましたが、かなり壊れています。

この最初の画像は、iPhone / iPad /ブラウザウィンドウでの外観です：http： //imgur.com/o3cVX

次の画像はAdobeDeviceManagerからのものです、これは私の友人の電話でどのように見えたかです：http: //imgur.com/kd47G

上部（ヘルプボタンの下）のルールが画面の制約内にとどまっていることに注意してください。ただし、下のボックスは画面から外れているように見えます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">デバイスがページを正しくレンダリングすることを確認するために使用しています。

これが私のHTMLです：

<div class="container">
    <div class="row-fluid>
        <div class="span9></div>
        <div class="span3>Help button is here</div>
    </div>
    <div class="row-fluid>
        <div class="span6></div>
        <div class="span6></div>
    </div> 
</div>

CSSは単純です：http ：//twitter.github.com/bootstrap/assets/css/bootstrap.css + http://twitter.github.com/bootstrap/assets/css/bootstrap-sensitive.css

ページの両方の部分はまったく同じように書かれていますが、表示が異なります。

特にこのデバイスの固定幅を使用して解決できますが、すべてのデバイスで機能するものが必要です。また、Bootstrapのドキュメントにこの問題がないことに気付いたので、不足しているものである必要があります/間違ったこと。

4

1 に答える 1

0

私は問題を見つけました-ボックスは使用していました：

* {
    box-sizing: border-box;
}

私のテストプラットフォームはiOS5と最新のChromeリリースだったので、プレフィックスは必要ありませんでした。

<=iOS4およびAndroid<=2.3では、接頭辞を付ける必要があります-webkit-。そうでない場合は、通常どおりにパディングを計算します（私の場合、幅を大きくして、ビューポートから押し出します）。

ソースは次のとおりです：http：//paulirish.com/2012/box-sizing-border-box-ftw/

うまくいけば、彼らが同じ問題を抱えているなら、それは誰かを助けるでしょう。

于 2012-07-19T10:38:05.983 に答える