ipad用のCSSファイルをロードする

Question

ipad用のCSSファイルを読み込もうとしています。私が試したこの：

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px)" type="text/css"> 

それは、iPadのために働くが、私は私のデスクトップ上の768で1024私の解像度を下げると、同様のFirefox iPadでのスタイルシートの負荷をサイトに表示する場合。だから私は試した：

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css"> 

しかし、同じ問題。 iPad上でページを表示している場合にのみ、このスタイルシートが読み込まれるようにするにはどうすればよいですか？

Answer 1

どのような技術を使用していますか？ページにレンダリングする内容（サーバー側）を制御できる場合は、リクエストのUSER-AGENTヘッダーを確認できます。文字列iPadが含まれている場合は、cssタグをレンダリングし、含まれていない場合はcssタグをレンダリングします。

静的HTMLを配信しているだけの場合、これは機能しません。

Answer 2

この質問は、役立つかもしれない：

Detect iPhone/iPad purely by css

そして、この：これは私にとって良い作品 http://css-tricks.com/snippets/css/ipad-specific-css/

：

http://techcline.com/2010/04/cross-browser-issues-detect-ipad-users-through-user-agent-script.html

Answer 3

をより。/*一般的な計算されたレイアウトの

@media only screen and (device-width: 768px) { 

*/ }

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

/*ポートレートレイアウトについてのみ*/ }/*ランドスケープレイアウトのみ*/ のため

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

}

Answer 4

さまざまな画面サイズ解決策私はこの問題のメディアクエリだけを使用することができませんでした。

すでにすべてのプロジェクトにhttp://www.modernizr.com/が含まれているので、私は組み合わせを使用することができました。 Modernizrは、タッチ対応デバイス上で.touchクラスを追加します。私はそれがPCではないことを決定するために.touchを使用し、次にどのモバイルデバイスであるかを絞り込むメディアクエリを試してみることをお勧めします。