如何不仅根据媒体宽度/高度将不同的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错误的原因。