web-dev-qa-db-ja.com

iPhone / AndroidブラウザはCSS @mediaハンドヘルドをサポートしていますか？

IPhoneやAndroidなどの携帯電話で実行しているWebブラウザーのWebページのCSSを変更したい。 CSSファイルで次のようなことを試しました。

@media handheld {
  body {
    color: red;
    }
  }

しかし、少なくともiPhoneでは、効果はないようです。理想的にはjavascriptを使用せずに、iPhoneなどで動作が異なるCSSを作成するにはどうすればよいですか？

iphoneandroidcssmedia
47
Colen

このサイト から、iPhone/Android Phoneをターゲットにするのに役立つ他のメディアクエリがいくつかあります。

    // target mobile devices
@media only screen and (max-device-width: 480px) {
    body { max-width: 100%; }
}

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    // CSS goes here
}

// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
@media only screen and (min-resolution: 300dpi) {
    // CSS goes here
}

Max-device-widthメディアクエリを使用して、Android電話を正常にターゲティングできましたが、リストされている480ではなく800pxまで幅を調整する必要がありました。iPhone4の場合、 -webkit-min-device-pixel-ratioは、iPhone4をターゲットにするために機能しました（最大デバイス幅：480pxは機能しませんでした。iPhone3をターゲットとするものの、テストするのに便利なものはありませんでした）。

これは非常に面倒になりますが、多数のデバイスをサポートし、各デバイスにカスタムCSSが必要な場合、メディアクエリをサポートしている限り、各プラットフォームを微調整するために必要なことを行うことができるようです。はい、私は最初に標準にコーディングするので、できるだけ多くのCSSを再利用できますが、多くの場合、使用されているデバイスに適したサイズの代替レイアウトを提示することについて話します。

29
LocalPCGuy

@media handheldは、Webページを実際に表示することさえできなかった過去の古代の小さなproto-html携帯電話のみを指します。 ePUB、MOBI、タブレット、ベンダーのコミュニティはすべて、「H * ck no、我々はnot@media handheldデバイス！」は、これが「本物の」Webページに従属する無人の土地に永久に着陸することを正しく心配していたためです。

非常に高解像度のディスプレイを備えた今日の小型デバイスでは、比較的低解像度の大型ディスプレイと非常に高解像度の小型ディスプレイで「正しく」表示する方法をHTMLに伝える良い方法がまだありません。そして、認定された古いオナラとして、私の目はあなたに、いいえ、2倍のフォントを含むすべてを小さくするだけではないことを思い出させたいと思います。

19
Jim Adcock

いいえ、iPhoneもAndroidブラウザはCSS @media handheld。

5
Jonas Äppelgran

メディアクエリ「ホバー」の使用を見てください。

これをSCSSファイルに入れます：

// At this point the CSS would target screens above 990px - but only
// if they support hover (i.e. laptops, PC's etc).
$point-at-which-use-large-screens: (min-width 990px) (hover hover);

.some-class-you-want-to-target {

  // Some CSS to only apply to larger screens with mouse available.
  @include breakpoint($point-at-which-use-large-screens) {
    color: red;
  }
}

SCSSでgruntなどを実行すると、次のようなCSSが生成されます。

@media (min-width: 991px) and (hover: hover) {
  color:red;
}
0
bailey86