如何申请不同的CSS不只是基于媒体的宽度/高度的移动设备 [英] How to apply different CSS for mobile devices not just based on media width/height

问题描述

我要显示一些内容只是用于移动设备，手机和平板电脑不同的CSS样式，但具有不同宽度媒体查询不工作，只是因为我们说我的手机和我的17笔记本电脑都具有相同的全高清相当不错分辨率，现代平板电脑有更大的分辨率高于大多数桌面显示器都有...

I want to show different CSS styles for some elements just for mobile devices, phones and tablets, but media queries with different widths do not work quite good just because let's say my phone and my 17" laptop both have the same full HD resolution and modern tablets have resolution bigger than most desktop monitors have...

所以我想申请的CSS样式为Android，iPhone / iPad的，黑莓，Windows是手机/平板电脑等移动设备。

So I want to apply CSS styles for android, iphone/ipad, blackberry, windows mobile devices that are phones/tablets.

有什么方法？

推荐答案

有一件事你可以做的是应用自定义类使用JavaScript通过测试的userAgent html元素或body元素。

One thing you can do is apply custom classes to the html element or body element using javascript by testing the userAgent.

见下图：

<一个href=\"http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery\">What是检测手持设备中的jQuery的最佳方法？。所以，你的解决方案将是这个样子。

What is the best way to detect a handheld device in jQuery?. So your solution would look something like this.

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错误的原因在操作系统版本和浏览器等的变化。

Keep in mind though this targets the general device this does not address the variation in os version and browser etc. which in many cases proves to be the cause of js and css bugs.

这篇关于如何申请不同的CSS不只是基于媒体的宽度/高度的移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！