web-dev-qa-db-ja.com

メディアクエリを使用して、iPad用CSSをターゲットにしてSafari 4デスクトップを除外する方法

CSSをiPadのみにターゲティングするためにメディアルールを使用しようとしています。 iPhone/iPodおよびデスクトップブラウザを除外します。可能であれば、他のモバイルデバイスも除外したいと思います。

利用した

<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">

しかし、デスクトップSafari 4がそれを読み取ることがわかりました。 「768px」の代わりに「481px」を使用したバリエーションと、それに向きを追加したバリエーションを試しました。

<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

しかし運はありません。 （後で、iPadのユーザーエージェント文字列をスニッフィングしますが、今のところ、そのソリューションは機能しません。）

ありがとう！

更新：デスクトップSafariは現時点で画面の幅と高さを使用し、それに基づいて縦向きまたは横向きの向きを与えているようです。幅と高さがデスクトップブラウザを除外するようには見えません（私が何かを見落としている場合を除きます）。

http://mislav.uniqpath.com/2010/04/targeted-css/

cssipadsafarimedia
20
Miriam Salzer
 media="only screen and (device-width: 768px)"

答えを提供してくれたMislavMarohnićに感謝します。

これはiPadでどちらの方向でも機能し、デスクトップSafariを除外しているようです。

私がテストしていたとき(min-device-width: 768px) and (max-device-width: 1024px)ウィンドウを広げたり狭めたりするときに、スタイルを使用したり無視したりするSafari 4を見ることができました。テスト中(device-width: 768px)デスクトップのSafariブラウザの幅を正確に786pxにしようとしましたが、スタイルを表示できませんでした。

42
Miriam Salzer

私はPHPを使用してそれを行います。プラットフォームをUSER AGENT文字列から分離します。それからif($plateform == 'iPad') {.....}を使用するだけです。それはとても簡単です！

4
Maze

これはかなり単純化したデモです： http://css-tricks.com/snippets/css/ipad-specific-css/

2
Katzenfresser