CSS檢測無論是iphone ipad公司或任何其他手持

Question

也許這是簡單的，但我還沒有找到答案尚未

如何通過CSS檢測無論是在iPhone，iPad，iPad的，Android手機在任何模式？

我讀這 Detect iPhone/iPad purely by css 描述如何檢測所有具體設備

但我在找的是臺式機/筆記本電腦和所有的iPad/iPod/iPhone的/ Android的一般設備之間的區別

Answer 1

下面是我對此事的說明：對於任何設備 - 做它的屏幕尺寸和比你的研究，然後在你的樣式表對每個設備做一個@media查詢。

iPhone4的

<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 */ 
} 

樣式只在兩種尺寸之間。

@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; 
    } 
}