12

Chrome開発者ツールでorientation:portraitのcssをデバッグするには?

内部に書い たもの(orientation:portrait)は、Firebug や Chrome 開発者ツールからその場で編集することはできません。通常のプロパティが常に表示されます。

/*normal styles here */
#wrap {
   width:1024px;
}
@media only screen and (orientation:portrait){
   /* portrait styles here */
   #wrap {
      width:768px;
   }
}
4

4 に答える 4

4

「ブラウザーまたはデバイスは、ウィンドウの幅と高さをリッスンして向きを決定します。高さが幅よりも大きい場合、ウィンドウは縦向きモードです。幅が高さよりも大きい場合、横向きモードです。」

詳細: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

基本的に、縦向きの CSS を有効にするには、ブラウザ ウィンドウのサイズを変更する必要があります。

ブラウザウィンドウ内でfirebugを開くと、つまり. firebug が一番下にある場合、ブラウザー ウィンドウの高さが変わり、向きが横向きになるため、縦向きのスタイルが失われます。firebug と chrome の両方の開発者ツールについて、ツールを独自のウィンドウで起動して、ブラウザーのサイズが影響を受けないようにしてください。

PS。この種の編集には Firebug を使用します。ブラウザーのサイズを変更すると css が変化するのがはっきりとわかるからです。

于 2011-08-01T05:33:28.013 に答える
2

最近 (Chrome 17) 以降、Chrome DevTools は、一致するすべての CSS ルール (存在する場合) に影響するメディア クエリ コンテキストを表示します。現在の実装では、メディア クエリ評価の変更時にスタイルが更新されませんが (影響を受けるノードを再選択する必要があります)、http: //webkit.org/b/74292 は、一致する CSS ルールを動的に更新する要求を追跡します。

于 2011-12-12T14:29:22.467 に答える
0

上記のように、ブラウザー ウィンドウのサイズを変更して高さを幅よりも大きくすると、メディアの縦長が真になります。この URL http://robnyman.github.com/matchmedia/を使用できるので、ブラウザのサイズを変更し、そのページを更新すると、ポートレートに true が検出されているかどうかがわかります。

于 2012-08-03T14:51:34.837 に答える
0

最後に、Firefox 16 レスポンシブ モードで可能になりました。YouTube の動画はこちらhttp://www.youtube.com/watch?v=t07cLJhJkjQ

ここに画像の説明を入力

于 2012-11-08T03:58:26.780 に答える