[解決済み] iOS端末のみを対象としたCSSメディアクエリ【重複】について

質問

iOS搭載端末のみを対象とした@mediaクエリはありますか？

例えば

@media (min-device-width:320px) and (max-device-width:768px) {
    #nav {
        yada: yada;
    }
}

この場合、これらのデバイス幅を持つAndroidデバイスのページの動作も変わってしまうのでしょうか？

解決方法は？

はい、できます。

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

YMMV

だけなので、うまくいきます。 サファリモバイル が実装されています。 -webkit-touch-callout : https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

ご注意ください @supports はIEでは動作しません。IEは上記の2つをスキップします @support のブロックがあります。詳しくは、以下をご覧ください。 https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/ . をお勧めします。 ではなく 使用 @supports not というのは、このためです。

iOSのChromeやFirefoxはどうでしょうか？現実には、これらは WebKit レンダリングエンジンの上にスキンを載せているだけです。したがって、iOSのポリシーが変更されない限り、上記はiOSのどこでも機能します。2.5.6を参照してください。 App Store審査ガイドライン .

警告: iOS は、今後数年間の新しい iOS リリースで、このサポートを削除する可能性があります。上記のCSSを必要としないように、もう少し頑張ってください。この回答の以前のバージョンでは -webkit-overflow-scrolling が、新しいiOSのバージョンで削除されました。 コメントでご指摘の通り、他にも以下のような選択肢があります：Go to 対応するCSSプロパティ で検索し、「"Safari on iOS"」と入力してください。