Question

我想为移动设备，手机和平板电脑的某些元素展示不同的CSS样式，但是不同宽度的媒体查询效果不是很好，因为假设我的手机和我的17“笔记本电脑都具有相同的全高清分辨率和现代平板电脑的分辨率比大多数桌面显示器都要大......

所以我想为Android，iphone / ipad，黑莓，手机/平板电脑的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的示例here！

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元素。

见下文：

What is the best way to detect a mobile device in 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>

请记住，虽然这针对一般设备，但这并未解决操作系统版本和浏览器等的变化，这在许多情况下被证明是导致js和css错误的原因。

如何为移动设备应用不同的CSS，而不仅仅是基于媒体宽度/高度

3 个答案: