@media only screen and (max-device-width : 640px) {
/* Styles */
}
@media only screen and (max-device-width: 768px) {
/* Styles */
}
これまでのところ、これが私のものです。私が作業しているモバイル サイトの PSD モックアップの幅は 640 ピクセルです。もう 1 つは、サイトのタブレット バージョンで、768 ピクセルです。max-width のみを使用して Web ブラウザーでサイトをテストできましたが、今度はこのサイトをデバイスで動作させる段階です。それでも、通常のフル サイズの Web ページがレンダリングされます。上記の 2 つのクエリは、私の推測です。どこが間違っているのでしょうか?
ベストアンサー1
これはレベル4メディアクエリで実行できます:(ブラウザのサポートはかなり良い - CaniUse）
インタラクションメディア機能
ここでの考え方は、デバイスをターゲットにすることです。機能（つまり、サイズまたは解決移動するターゲットになりがちなデバイスの
のポインタメディア特集デバイスで使用されるポインター メカニズムの品質を照会します。
のホバーメディア特集特定のデバイスを使用してページ上の要素にマウスを移動できるかどうかをユーザーが照会します。
それで質問に答えると...
モバイル デバイス/テーブルは次の点で類似しています。
1) デバイスの主な入力メカニズムの精度には限界があります。
つまり、次のメディアクエリを使用できます。
@media (pointer:coarse) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 200px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
@media (pointer:coarse) {
div {
background: red;
}
}<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#pointer">pointer media feature</a> queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>Codepenデモ
2) 主要なポインティングシステムはホバリングできない
したがって、メディアクエリは次のようになります。
@media (hover: none) {
/* custom css for devices where the primary input mechanism cannot hover
at all or cannot conveniently hover
}
注意:Chrome/Androidバージョン59より前では、on-demandhover/any-hoverメディアクエリの値が必要でした。この値は後に仕様から削除され、Chromeでは不要になりましたバージョン59以降。古いバージョンのAndroidをサポートするには
@media (hover:none), (hover:on-demand) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 150px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
@media (hover:none), (hover:on-demand){
div {
background: red;
}
}<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#hover">hover media feature</a> queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>Codepenデモ
注意:
マウスをモバイル/タブレットに接続した場合でも、ホバーメディア機能はnone、主要なインタラクション モードではホバーはサポートされません。
もし私たちが二次的な使用できるデバイスを考慮する任意のポインタと任意のホバー機能
したがって、ポインティング デバイスに接続されたモバイル デバイスを「デスクトップ」のように扱いたい場合は、次のようにします。
@media (any-hover: hover) { ... }