web-dev-qa-db-ja.com

CSS3メディアクエリがモバイルデバイスで機能しないのはなぜですか。

Styles.cssでは、メディアクエリを使用しています。どちらもバリエーションを使用しています。

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

ウィンドウを縮小すると、通常のブラウザ（Safari、Firefox）で必要なレイアウトにサイトのサイズが変更されますが、携帯電話ではモバイルレイアウトはまったく表示されません。代わりに、デフォルトのCSSが表示されているだけです。

誰かが私を正しい方向に向けることができますか？

htmlcsscss3mobile-websitemedia-queries
151
redconservatory

これら3つすべてが役立つヒントでしたが、メタタグを追加する必要があるようです。

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

今では、Android（2.2）とiPhoneの両方で問題なく動作しているようです...

383
redconservatory

上記の標準的なCSS宣言をメディアクエリに含めることを使用することを忘れないでください。

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}
52
The4thIceman

ここでキーワードonlyが問題になる可能性があります。このようなメディアクエリを使用しても問題はありません。

@media screen and (max-width: 480px) { }

21
Moin Zaman

私はプレスサイトでブートストラップを使用しましたが、IE 8では動作しませんでした。css3-mediaqueries.js javascriptを使用しましたが、まだ動作しません。このjavascriptファイルでメディアクエリを機能させたい場合は、cssのメディアクエリ行に画面を追加してください。

ここに例があります：

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

cssリンク行を上記の行と同じくらい単純にします。

17
Mohsen

今日も同じような状況でした。メディアクエリが機能しませんでした。しばらくして、 'and'の後のスペースがなくなっていました。適切なメディアクエリは次のようになります。

@media screen and (max-width: 1024px) {}
12
dklog79
@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}
1
Ketam Srinivas

あなたのcssコメントがすべてこのマークアップを使用することを確認してください/* ... */ - MDNによると、これはcssの正しいコメントマークアップです

私は彼らのドキュメントから直接ブートストラップ4のメディアクエリをコピーしました、そしてすべてのクエリは同じjavascriptスタイルのコメントマークアップ//でラベル付けされています！

さらに、IntelliJテキストエディタでLESSファイルのcssの特定の行をコメントアウトすることができましたが、自動的に//を使用しました。フリーウェアではないので、それは正しいと思いました。この動作を修正するための設定メニューがあります。

また、信頼できるオンラインバリデータであなたのCSSを検証してください。 これはW3によるものです

1
Cameron Donahue

私にとっては、max-heightの代わりにmax-widthを指定しました。

それがあなたなら、それを変えに行きなさい！

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }
0
Ruto Collins

私はいくつかの方法を使います。同じスタイルシートで私は使用します：@メディア（最大幅：450ピクセル）、または別々にあなたが正しくリンクをヘッダーに持っていることを確認してください。私はあなたのfixmeupを見ました、そしてあなたはcssへのリンクの混乱した配列を持っています。 HTCの欲望Sでもあなたが言う通りに働きます.

0
Benteh

私も最近この問題に遭遇しましたが、後でandと(の間にスペースを入れなかったことが原因であることがわかりました。これはエラーでした

@media screen and(max-width:768px){
}

それを修正するためにこれに変更しました

@media screen and (max-width:768px){
}
0
sdkcodes

ブラウザのズームレベルが正しくない場合にも発生する可能性があります。ブラウザウィンドウのズームは100％になります。 Chromeでは、ズームレベルをリセットするためにCtrl + 0を使用してください。

0
Suhail AKhtar

リングに別の答えを投げます。 CSS変数を使用しようとすると、静かに失敗します。

@media screen and (max-device-width: var(--breakpoint-small)) {}

CSSの変数は、メディアクエリでは機能しません（設計上）。

0
Seth