0

ブロガー テンプレートにメディア クエリを適用しようとしています。

@media all and (max-width: 600px)
  { 
     //styling here
  }

これは、ウィンドウのサイズを変更しているときに、デスクトップ ブラウザーで正常に機能します。ただし、モバイル デバイス (Android、iPhone) でテストすると、動作せず、デスクトップ バージョンが表示されます。この記事を見ましたが、何も役に立ちません。

4

3 に答える 3

4

スタイルをレンダリングするには、これが必要viewportです。html

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

ここでそれについて読むことができます: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

于 2013-03-07T14:24:14.687 に答える
0

オリジナル以外のiPhoneを使用している場合、幅は640pxです。そして、最近のほとんどのAndroidスマートフォンは、それ以上ではないにしても、そこにあります。したがって、max-width: 600pxクエリは狭すぎて、これらの電話のいずれにも適用できません。

これを修正するには、max-widthパラメータを増やして、電話を含めながらデスクトップを除外します。モバイルデバイス用のTwitterBootstrapの幅を考慮して、試してみてくださいmax-width: 767px。

于 2013-03-07T13:44:34.740 に答える
0

現時点では、あなたが言及しているコードは適切に配置されておらず、y 軸が隠されているようです。ある場合は、1 しかありません。幅が狭い場合は、より多くのメディア クエリが必要です。blogspot サイト(カスタム ドメインであるため、.blogspot はありません) には、幅がはるかに小さいさまざまな幅のメディア クエリが多数あります。

max-width小さい幅のメディア クエリのさまざまな要素に対してとを設定するとmax-height、確実に機能することがわかります。

ヒント: テストするには、Android/iOS で Web サイトを開く必要はありません。デスクトップまたはこのサイトのウィンドウのサイズを変更するだけです。

于 2013-03-07T16:41:09.063 に答える