web-dev-qa-db-ja.com

CSSで純粋にiPhone / iPadを検出

私は純粋にスタイルシートでiPhoneまたはiPadを検出しようとしています。 @mediaハンドヘルドを使用して、 here 、画面のみ、（max-device-width：480px）{。

ただし、これは機能しないようです。何か案は？

iphonecssipad
36
FLX

これは、iPhone（および同様の）デバイス[iPadではない]の処理方法です。

私のCSSファイルでは：

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
   /* CSS overrides for mobile here */
}

HTMLドキュメントの先頭：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
24
Bart

iPhone＆iPod touch：

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

iPhone 4およびiPod touch 4G：

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

iPad：

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

このO'Reillyの記事 から解決策を試してみてください。

重要な部分は、次のCSSメディアクエリです。

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">
14
DarkDust

私はこれらを使用します：

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {
}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {
} 

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
}

http://zsprawl.com/iOS/2012/03/css-for-iphone-ipad-and-retina-displays/

14
zSprawl

新しいタイプのiPhoneやiPadなど、さまざまな画面サイズ/比率/解像度を持つ多くのデバイスが過去5年間に登場しています。各デバイスのWebサイトをカスタマイズすることは非常に困難です。

一方、メディアクエリdevice-width、device-height、およびdevice-aspect-ratioは非推奨になったため、将来のブラウザバージョンでは動作しない可能性があります。 （ソース： [〜＃〜] mdn [〜＃〜] ）

TLDR：デバイスではなく、ブラウザの幅に基づいた設計。 このトピックの概要を紹介します 。

3
jkdev