Question

我希望能够检测当前用户是否正在使用低分辨率（＆lt; 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"});
}

更进一步

以下是一些有趣且有用的链接：

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>');
}

检测低分辨率的Android设备

2 个答案: