css - 移动设备上的双倍字体大小

Question

也许这个问题很简单，但我不知道如何解决这个问题，也不知道我应该在谷歌中输入什么；)

在我的 CSS 中，我有以下声明:

body { font-size: 100%; }

不，因为新的高密度设备显示的字体非常小，我希望将该声明设置为如下内容:

body { font-size: 200%; }

在不创建/链接其他文件或对用户代理进行某些服务器端处理的情况下，最简单的方法是什么？

Answer 1

使用移动浏览器检测(服务器端或客户端)。您可以在 http://detectmobilebrowsers.com/ 找到它。如果浏览器是移动浏览器，请将 mobile 类添加到 body 标记。

例如如果您使用检测移动浏览器中的 jQuery 代码:

$(document).ready(function()
{
    if(jQuery.browser.mobile)
    {
        $('body').addClass('mobile');
    }
});

然后，在 CSS 中，您可以使用 body.mobile {} 和 .mobile .something {} 来应用特定于移动设备的样式。