7

編集：これは私の完全な新人エラーでした。テストしていたファイルセットとは別のファイルセットを編集していました。私を助けるために答えてくれたすべての人に心からお詫び申し上げます。少なくともメディアクエリについて皆さんからもう少し学んだので、すべての回答に賛成しましたが、答えはありませんでした。このチケットをどうするかアドバイスをお願いします。

これはこのサイトで忙しい話題ですが、私はこの問題の解決策を見たことがありません.

viewportタグは存在します。私は使用しています：

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Chrome でブラウザ ウィンドウのサイズを変更すると、問題なく動作し、到達した新しいブレークポイントにスナップすることがわかりますが、iPhone Safari ではサイトの左上のみが表示され、クエリを取得する兆候はありません。

iPhoneのポートレートに使用しているCSSメディアクエリは次のとおりです。

@media (max-width: 321px) { }

Bootstrap と LESS を使用しているため、メディア クエリはスタイルの最後にあります。

申し訳ありませんが、私はこれに関するコードを共有する立場にありません。それは奇妙なものです - 私が見逃しているかもしれない何かがあるかどうか誰かが見てくれることを願っています.

編集

これは私のiPhoneで動作している非常に基本的な例です。縦向きから横向きに回転でき、bg の色が変わるので、使用しているメディア クエリに問題はありません。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style type="text/css">

        body
        {
            background: blue;
        }

        @media (max-width: 321px)
        {
            body
            {
                background: red;
            }
        }
    </style>
</head>
<body>
    Here is my content...
</body>

4

2 に答える 2

11

編集 私にとってこれを解決したのは、max-device-widthまたはmax-widthのいずれかの二重（「または」操作）メディアクエリです。max-width, max-device-widthこれは David Rönnqvist の最初の提案のようなものですが、私にとっては、メディア クエリに BOTH を入れるだけでした。

@media screen and (max-device-width:640px), screen and (max-width:640px) {
    /* styles here */
}

BBTony、これがうまくいくことを願っています。

他の場所で見つけたよりも問題の詳細な説明であるため、以下を保持しています。私は最初の解決策（ラインの下）が嫌いだったので、千回も再調査しました-この投稿のおかげで、ばかげた!importantsなしで上記の解決策が得られました。

編集: これも機能しましたが、非常に洗練されていません:メディア クエリの条件付き CSS のすべての行に "!important" を配置します。

答えとしてそれを提案するのは気が進まなかったのですが、これを3日間研究して大騒ぎした後、それが最初にうまくいったことでした.

問題の完全な説明: BBTony と同様の症状がありました。私はビューポートタグを持っていました（そして、推奨されているようにスタイルシートの上に持っていました）。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

小さいデバイスをキャッチすることを目的とした私のメディア クエリは、iOS 5.1 を実行している iPhone 3gs では無視されていましたが、iOS 6 を実行している iPhone 4s では同じメディア クエリが適切に取得されていました。

@media only screen and (max-device-width:640px) {
   /* many styles here */
}

非常に奇妙なことに、古い iPhone ではメディア クエリ内のほとんどの宣言が無視されていましたが、一部は尊重されていました。ただし、新しい iPhone 4s では、予想どおり、メディア クエリ内のすべての CSS が尊重されました。Safari デスクトップでは、メディア クエリはすべて完全に機能し、両方のブレークポイント (2 つある) でスナップします。

CSS エラーが原因でモバイル ブラウザーがメディア クエリを無視する可能性があることをここで読んだ後、いくつかの異なるリンターを介して CSS をリントしました。CSS が準拠していることを確認した後、メディア クエリ内のすべての CSS 行の後に !important 宣言を配置しました。

プレスト。

これが機能したことにどれほど腹を立てたかはわかりません。この場合、古いiPhoneが !important の条件のみを尊重するのはなぜですか。

于 2013-05-14T06:13:53.310 に答える
2

以前、自分のサイトでこれを使用したことがあり、iPhone 固有のメディア クエリとして機能しました。

@media only screen 
   and (max-device-width: 480px) 
   and (orientation:landscape) {
    /* iPhone landscape */
}

@media only screen 
   and (max-device-width: 480px) 
   and (orientation:portrait) {
    /* iPhone portrait */
}

このような他の質問への回答は、 480pxformax-device-widthがメディアクエリで何をすべきかを示唆しているようです。

于 2013-04-30T15:37:16.397 に答える