1

iPadで使用するWebサイトを構築しています。問題は、2 つのスタイルシートが必要なことです。

1 つはユーザーが全画面表示モード (アドレス バーなし) で表示する場合で、もう 1 つはサイトが Safari で標準で開く場合です。

次のような行を作成することは可能ですか:

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {}

しかし、それがフルスクリーンの場合ではありませんか？

4

2 に答える 2

1

device screen dimensions (width)あなたが言及したメディアクエリは、Safariまたはフルスクリーン（アドレスバーなしで説明されているように）を考慮せずに、画面幅、つまり、に従って機能します。それが理にかなっていることを願っています。

クイック検索を行ったところ、リンクが見つかりました。それが役に立てば幸い。

于 2012-09-24T18:32:09.303 に答える
1

iOS 5 では、メニュー バーなしで画面のサイズをターゲットにできるはずです (正確に を占めます18px)。これにより、フルスクリーンであることがわかります。

@media only screen and  (min-device-width: 672px) and (max-device-width: 1024px) and (orientation:portrait) {}

それが機能するかどうかは 100% ではありませんが、上部の黒いバーが占めることはわかっています18px。寸法は次のようになります。

landscape:1024x672 
portrait: 768x928

アップデート

jQueryでこれを行う方法を見つけました。依存していますwindow.navigator.standalone

$(document).ready(function(){
  if (("standalone" in window.navigator) && !window.navigator.standalone) {
    $('head').append("<link href='fullscreen.css' type='text/css' rel='stylesheet' />")
  }
});

これは、モバイルサファリがサポートしていることを前提としてwindow.navigator.standaloneいます。試してみる。

于 2012-09-24T18:38:38.000 に答える