如何为移动设备应用不同的CSS，而不仅仅是基于媒体宽度/高度
我想为移动设备，手机和平板电脑的某些元素显示不同的CSS样式，但是具有不同宽度的媒体查询效果不佳，因为我们说我的手机和我的17英寸笔记本电脑都具有相同的全高清分辨率和现代平板电脑的分辨率比大多数桌面显示器都要大
所以我想要应用Android，iphone / ipad，黑莓，Windows手机/平板电脑的移动设备的CSS样式。
有什么办法吗？
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'); } 媒体查询不仅可以使用宽度。 您还可以使用方向甚至设备像素比例。 所以，如果你说的东西像一个视网膜显示，那么你可以写或多或less如下：
@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的具体例子！
你可以做的一件事是通过testinguserAgent将自定义类应用到使用javascript的html元素或body元素。
见下文：
在jQuery中检测移动设备的最佳方法是什么？ 。 所以你的解决scheme看起来像这样。
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版本和浏览器等的变化，这在很多情况下被certificate是js和css bug的原因。