4

同様の質問が以前にここで尋ねられましたが、それらを読んだ後、私のサイトで機能する回答はまだ見つかりません.

Bootstrap を中心にサイトを構築しましたが、独自のメディア クエリをいくつか追加しました。ライブ テスト サイトは次のとおりです: http://agoodman.com.au

メディア クエリによって変更されるセクションは、「料金」と「地図」オーバーレイです。ラップトップを使用している場合、ブラウザーのサイズを変更すると、これらのセクションがブロックとして表示されます。

私のスタイルシートのリンク:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">

「User.css」は、必要に応じてブートストラップのメイン フレームワークを維持および更新できるようにしたかったため、別のファイルにすぎません。User.css は、ブートストラップのスタイルをオーバーライドします。user.css の私のメディア クエリは次のとおりです。

@media screen or handheld(max-width: 979px) {
    .fee-buttons {
        height: auto;
        font-weight: 600;
        position: relative;
        padding: 0;
        margin: 0;
        list-style: none;
        }

    .fee-buttons .transformation {
        width: 100% !important;
        height: 300px;
        position: relative;
        z-index: 10;
        left:0;
        }

    .fee-buttons .hourly, .fee-buttons .membership {
    float: none;
    width: 100% !important;
    }

    li.button{
    overflow:visible;
    }

}

@media screen or handheld(max-width: 995px) {
    #overlay {
        position: relative;
        display: block;
        width: auto;
        right: 0;
        padding:1em;
    }
}

前述のとおり、デスクトップ ブラウザーでは問題なく動作しますが、モバイル ブラウザーではまったく機能しません。iPhone 4 (safari を使用) と HTC Desire (標準の android ブラウザーを使用) の両方でテストしましたが、どちらも同じように表示されます。 .

ここで私が間違っていることについてのアイデアはありますか?

編集：

小さな画面幅でどのように見えるべきかのスクリーンショットを次に示します。ここに画像の説明を入力

Android と iPhone での現在の表示は次のとおりです。デバイスは私のメディア クエリを無視しています。ここに画像の説明を入力

4

2 に答える 2

8

自分の質問に答えて申し訳ありませんが、うまくいくものを見つけました。

メディアクエリの設定方法に誤りがありました。それ以外の

@media screen or handheld(max-width: 995px)

クエリを次のように変更しました

@media handheld, screen and (max-width: 995px)

この男が提案したように：https://stackoverflow.com/a/996820/556006

すべてのデバイスで完璧に機能しました。提案を提供してくれた人々に感謝し、皆さんに賛成票を投じます。

于 2012-07-26T01:02:21.070 に答える
1

完全なWebサイトを表示して、本当に押しつぶされた、見栄えの悪いコンテンツがたくさんあります.

これは、メディア クエリが幅 979 および 995 ピクセルの大きな画面をターゲットにしていることが原因である可能性があります。モバイル画面ははるかに小さいです。

iPhone 4 のようなものをターゲットにするには、ランドスケープとポートレートに ofが必要max-widthです960px(そのため、ブートストラップのデフォルトは 960 です) 。480px

可能なすべての画面サイズをターゲットにすることはできないため、ブートストラップはデフォルトの幅の賢明なリストを提供します。

于 2012-07-25T23:50:56.867 に答える