web-dev-qa-db-ja.com

iPadおよびiPadのみを対象とするCSSメディアクエリ

こんにちは。iPad、Galaxy Tab、Acer Iconia、LG 3D Padなど、複数のタブレットデバイスを使用しています。

  • iPad-1024 x 768
  • LGパッド-1280 x 768
  • Galaxy Tab-1280 x 800

CSS3メディアクエリのみを使用してiPadをターゲットにしたい。 LGとiPadのデバイス幅は同じ768pxなので、各デバイスの分離に問題があります。

私は以下を分離しようとしましたが、機能していないようです：

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */

-webkit-device-pixel-ratioおよびその他の-webkit *オプションと、iPadのターゲットとなる値がわかりません。スタイルにJavaScriptを使いたくありませんか？

cssipadcss3webkitmedia-queries
64
Hossain Khan

最後に、次のソリューションを見つけました： CSSを使用して異なるデバイスプラットフォームを検出

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

HTTP呼び出しを減らすために、これは既存の共通CSSファイル内でも使用できます。

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

お役に立てれば。

その他の参照：

124
Hossain Khan

私はこれに答えるのに少し遅れましたが、上記のどれも私のために働きませんでした。

これは私のために働いたものです

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    //your styles here
   }
5
Baig

まあまったく同じ質問と答えもあります=）

http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1

@media only screen and (device-width: 768px) ...
@media only screen and (max-device-width: 1024px) ...

現在テストできませんので、テストしてください=）

さらにいくつか見つけました：

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

または、javascriptでナビゲーターを確認し、javascriptでcssファイルを生成/追加します

3
Daniel Ruf

何らかのスクリプトを使用して、ユーザーエージェントでデバイスをターゲットにする必要があります。 iPadのユーザーエージェントは次のとおりです。

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
3
Beatriz Oliveira
<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />

</head>
<body>
    <div id="iphonelandscape">iphone landscape</div>
    <div id="iphoneportrait">iphone portrait</div>
    <div id="ipadlandscape">ipad landscape</div>
    <div id="ipadportrait">ipad portrait</div>
    <div id="htcdesirelandscape">htc desire landscape</div>
    <div id="htcdesireportrait">htc desire portrait</div>
    <div id="desktop">desktop</div>
    <script type="text/javascript">
        function res() { document.write(screen.width + ', ' + screen.height); }
        res();
    </script>
</body>
</html>
2
Daniel Raja Singh

最近では、 Media Queries Level 4 機能を使用して、デバイスに機能があるかどうかを確認できます 要素の上に「ホバー」する 。

@media (hover: hover) { ... }

IPadには「ホバー」状態がないため、iPadなどのタッチデバイスを効果的にターゲットにできます。

0
kevinius