0

アダプティブ/レスポンシブ Web 開発は初めてです。デバイスの向きが変更されたときに、モバイル デバイスが画面解像度の変更をどのように処理するかについて混乱しています。

320 (ポートレート) 用と 480 (ランドスケープ) 用の 2 つのメディア クエリを作成すると、iPhone は向きに関係なく 320 バージョンのみをロードし、画面いっぱいにズームします。

iPhone が横向きにロードされている場合、または iPhone が縦向きから横向きに傾いている場合に、新しい 480 スタイルを配信する方法はありますか?

4

2 に答える 2

3

First of all media queries have a property that you probably discovered

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

You could force render on the iPhone via

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

and then use some css to target landscape mode

@media screen and (min-width: 321px){
  //styles
}
于 2012-11-21T23:59:17.660 に答える
1

CSS メディア クエリは、あるデバイスから別のデバイスへの方向付けに関して少し注意が必要です。まだ良い js オプションがあります。

window.addEventListener('orientationchange', changeOrientation, false);

function changeOrientation() {
if (orientation == 0 || orientation == 180) {
  //portraitMode
}
else {
  //LandscapeMode
}
于 2012-11-22T15:26:39.397 に答える