媒體查詢平板電腦肖像和以下

我知道如何做平板電腦肖像和手機的媒體查詢。但是，是否有可能只有一個媒體查詢所有人：平板電腦肖像和電話？媒體查詢平板電腦肖像和以下

/* tablets portrait */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

} 

/* phones */ 
@media screen and (max-device-width: 640px) { 

} 

/* tablets portrait and phones 
Is it possible to have only one media query for this that do the same than the other media queries together? 
*/

來源

2013-04-20 Nrc

號

爲什麼？

iPad和iPhone是具有不同屏幕尺寸，分辨率和不同像素密度（基於不同版本/版本 - 請參閱here）的不同設備。

Device      Screen(res) CSS pixel ratio 
iPad (generation 1,2) 1024 × 768 1 
iPad (generation 3,4) 2048 × 1536 2 
iPhone (gen 1,3G,3GS)  480 × 320  1 
iPhone (gen 4,4S)   960 × 640  2 
iPhone (gen 5)    1136 x 640 2

而iPad被歸類爲平板電腦，iPhone的移動，因此你永遠不可能用一個媒體查詢，充分滿足雙方或創建兩個設備的理想經驗。

我該怎麼辦？

一種解決方案是提供一個相當普遍的方法，併爲3個級別的設備類型和/或屏幕寬度/取向的提供媒體查詢：

移動/智能電話
平板
桌面

的基本理論是，你需要你的網站或應用程序是可用/可見在儘可能多的設備越好，這樣反而規範你的方法Ø f錯過了大量的單個設備和/或製造商。

粗例子可能是：

@media screen and (max-width:500px) { 
    /* Mobile styles */ 
} 
@media screen and (min-width:501px) and (max-width:999px) { 
    /* Tablet styles */ 
} 
@media screen and (min-width:1000px) { 
    /* Desktop styles */ 
}

但意見千差萬別爲三種類型之間的最佳斷點和我知道的研究/這樣的斷點數據將被廣泛的開發者社區的歡迎。

如果我想專門針對iOS設備，該怎麼辦？

你可以這樣做。被別人

特定的iOS

/* iPads (portrait and landscape) ----------- */ 
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) { 
    /* Styles */ 
} 

/* iPads (landscape) ----------- */ 
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) { 
    /* Styles */ 
} 

/* iPads (portrait) ----------- */ 
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) { 
    /* Styles */ 
} 

/* iPhone 4 ----------- */ 
    @media 
    only screen and (-webkit-min-device-pixel-ratio : 1.5), 
    only screen and (min-device-pixel-ratio : 1.5) { 
    /* Styles */ 
}

進一步努力：有幾個人提出，滿足特定的iOS設備的具體要求媒體查詢（沒有測試過，但我經常看到隨着鏈接我在下面列舉）：

一般參考：

買者

我使用上面的一個示例方法，而是可以應用於媒體查詢是通過多種方式：

@media screen and (max-width:500px) { ... } 
@import url(mobile.css) (max-width:500px); 
<link rel="stylesheet" type="text/css" media="screen and (max-width: 500px)" href="mobile.css" />

來源

2013-04-21 02:19:11 nickhar

看一看Detectizr（https://github.com/barisaydinoglu/Detectizr）它是一個Modernizr的（http://modernizr.com/）擴展。

此JS會將CSS類添加到html標記，以便您可以在沒有媒體查詢的情況下定位設備。如.phone {}或.tablet {}

來源

2015-02-05 16:37:25

媒體查詢平板電腦肖像和以下

回答

相關問題