检测低分辨率android设备

Question

我希望能够检测当前用户是否使用低分辨率（< 320px）设备并为该用户加载不同的样式表。有没有办法做到这一点？

Answer 1

您可以在网上找到许多文章，解释如何为智能手机打造优秀的网站设计。

要回答你的情况，你可以找到一些方法来处理它：

媒体查询

由于CSS3，你可以使用max-width或device-width。

这将使类似：

<link rel="stylesheet" type="text/css" 
    media="screen and (max-device-width: 480px)" 
    href="shetland.css" /> 

的JavaScript

您可以使用JavaScript来检查浏览器的宽度。

下面是一个例子使用jQuery：

if ($(window).width() < 320) { 
    $("link[rel=stylesheet]").attr({href : "mobile.css"}); 
} else { 
    $("link[rel=stylesheet]").attr({href : "desktop.css"}); 
} 

进一步说

这里有一些有趣的和有用的链接：

• Responsive web Design on Smashing Magazine
• Detect Mobile Devices on about.com
• An older article (but where you can find some useful tips too

Answer 2

那么首先你检测与screen.width和screen.height显示器的分辨率。

if (screen.width < 320 || screen.height < 320) { 
    .... 
} 

然后，您需要实际加载样式表。最简单的方法是在任何装载机或任何东西外包含这个，所以你可以只是document.write它。

if (screen.width < 320 || screen.height < 320) { 
    document.write('<link rel="stylesheet" src="lowres.css"></script>'); 
} else { 
    document.write('<link rel="stylesheet" src="desktop.css"></script>'); 
}