2

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

所以我想为 android、iphone/ipad、blackberry、windows 移动设备应用 CSS 样式，这些设备是手机/平板电脑。

有什么办法吗？

4

3 回答 3

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 特定示例！

于 2013-11-06T10:25:17.087 回答
1 
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');
    }
于 2013-11-06T10:27:46.047 回答
1

您可以做的一件事是通过测试 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>

请记住，尽管这针对的是通用设备，但这并不能解决操作系统版本和浏览器等方面的变化，这在许多情况下被证明是导致 js 和 css 错误的原因。

于 2013-11-06T16:24:18.547 回答