如何不僅根據媒體寬度/高度將不同的CSS應用到移動設備上

Question

我只想為移動設備，電話和平板電腦顯示某些元素的CSS樣式，但是寬度不同的媒體查詢效果不佳，只是因為我的手機和17英寸筆記本電腦都具有相同的全高清分辨率和現代平板電腦的分辨率比大多數台式機顯示器大。

因此，我想為手機，平板電腦等Android，iphone / ipad，blackberry，Windows移動設備應用CSS樣式。

有什么辦法嗎？

Answer 1

媒體查詢不僅可以使用寬度。 您還可以使用方向甚至設備像素比率。 因此，如果您要處理類似視網膜顯示器的內容，則可以按照以下方式或多或少地編寫它：

@media only screen 
   and (min-device-width : xxx px) 
   and (max-device-width : xxx px) 
   and (orientation : landscape or portrait)
   and (min-resolution: xxx dpi){ 

   // your css goes here

}

在這里查看一個特定於Webkit的示例！

Answer 2

if ((getResources().getConfiguration().screenLayout & 
Configuration.SCREENLAYOUT_SIZE_LARGE) == Configuration.SCREENLAYOUT_SIZE_LARGE ||
(getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_XLARGE)
    ==          Configuration.SCREENLAYOUT_SIZE_XLARGE ){
        System.out.println('In Tablet');
    }else {
        System.out.println('In Phone');
    }

Answer 3

您可以做的一件事是通過測試userAgent，使用javascript將自定義類應用於html元素或body元素。

見下文：

在jQuery中檢測移動設備的最佳方法是什么？ 。 因此，您的解決方案將如下所示。

JS

/*
see the link above for other user agents. 
you could come up with a bit more sophisticate solution 
I'm sure but this would be a quick implementation.
*/
<script type="text/javascript">

//test if droid


if( /Android/i.test(navigator.userAgent) ) {
    $('body').addClass('device_android');
}

</script>

CSS

<style>

//css styles for android

.device_android element #id .orclass {
    //some styles for android specific styling here
}

</style>

請記住，盡管這是針對通用設備的，但這不能解決os版本和瀏覽器等方面的差異。在許多情況下，事實證明這是js和css錯誤的原因。