0

現在、電話、タブレット、デスクトップの 3 つの異なるデバイス グループを対象とする適切な @media クエリを作成しようとしています。

SASS で次の mixin を使用して実行します。

@mixin respond-to($media) {
  @if $media == phones {
    @media only screen and (max-width: 320px) { @content; }
  }
  @else if $media == tablets {
    @media only screen and (min-width: 321px) and (max-width: 979px) { @content; }
  }
  @else if $media == desktops {
    @media only screen and (min-width: 980px) { @content; }
  }
}

これは、私が持っているほとんどのデバイスで実際にうまく機能します。しかし、ここにiPad 2があり、Safariでサイトを試してみたところ、次のことが起こりました:

ポートレートモードではすべて問題ありません。それは「タブレット」グループによって処理されます。横向きモード (作業する幅が 1024px の場合) でも、タブレット グループに分類されます。しかし、私のレイアウトは 980px よりも広い画面で完全に機能するため、そうすべきではありません。

私が知ったように、iOSデバイスは常に縦向きモードのときの画面サイズを報告します（実際にはばかげた考えです）。私の場合は768x1024です。上記のメディアクエリを使用すると、横向きの場合、タブレット以外のセクションに収まることはありません。

他のデバイス (正しく動作するアンドロイドなど) を邪魔することなく、横向きモードの iPad 2 をタブレット クエリから除外する方法はありますか?

それ以外の場合は、回避したい独自の厳密なメディアクエリを使用して、すべてのデバイスを個別にターゲットにする必要があります。

4

1 に答える 1

0

問題はビューポートのメタ タグによるものだと思います。以下は、すべてのレスポンシブ サイトで使用するものです。

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2013-09-19T20:58:28.610 に答える