css - CSS は、iphone ipad またはその他のハンドヘルドのいずれかを検出します

Question

多分これは簡単ですが、私はまだ答えを見つけていません

CSSを介して任意のモードでiphone、ipad、ipad、android phoneのいずれかを検出するにはどうすればよいですか?

特定のすべてのデバイス を検出する方法を説明しているこのDetect iPhone/iPad purely cssを読みまし た

しかし、私が探しているのは、デスクトップ/ラップトップとすべてのiPad/iPod/iPhone/Androidデバイスを一般的に区別することです

Answer 1

この問題に関する私のメモは次のとおりです。どのデバイスでも、画面のサイズと比率について調査し、各デバイスのスタイルシートで @media クエリを実行します。

iphone 4

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

(縦または横) iPad で

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

携帯電話のポートレート

 @media screen and (max-device-width: 480px) and (orientation: portrait){
 /* some CSS here */
 }

携帯電話の風景

@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}

携帯電話の縦または横

@media screen and (max-device-width: 640px){
  /* some CSS here */
}

iPhone 4+ 縦または横

@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

iPhone 5のみ

@media only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-    webkit-min-device-pixel-ratio: 2) {
    /* styles here */
}

iPhone < 5: アスペクト比

@media screen and (device-aspect-ratio: 2/3) {}

タブレットの縦または横

@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}

デスクトップ

@media screen and (min-width: 1024px){
/* some CSS here */
}

2 つのサイズの間のみのスタイル。

@media screen and (min-width: 319px) and (max-width: 1281px){}

BTDUBS - WordPress に is_iphone() グローバルが組み込まれていることをご存知ですか?

global $is_iphone;
if ( $is_iphone ) {
 // do something if $is_iphone is true
 }

Answer 2

問題を解決するために @media クエリを使用できます。また、デバイスの向きを設定してデバイスをターゲットにするか、以下のように最大幅を設定してから CSS を記述することもできます。お役に立てれば。

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}