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

Question

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

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

有什么办法吗？

Answer 1

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