14

我正在设计一个移动网站，其中有一个可以下载壁纸的部分。为了适应更多用户，我希望能够根据屏幕分辨率下载壁纸。我想从 JavaScript 中检测分辨率并显示适当的壁纸。

这是我在网上找到并尝试并失败的 xD：

width  = window.innerWidth  || document.body.clientWidth
height = window.innerHeight || document.body.clientHeight;

对于分辨率为 720x1280 的 SGS3，我得到 360x567。

我应该如何从 JavaScript 中发现手机的分辨率？

4

4 回答 4

41

您也许可以使用该screen对象：

var w = screen.width;
var h = screen.height;

更新- 尝试使用它window.devicePixelRatio：

var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio;
var h = screen.height * ratio;
于 2013-06-28T07:59:16.397 回答
6

Ken Fyrstenberg，很棒的东西，谢谢。我一直在寻找一种简单的方法来检测所有可能的屏幕尺寸和分辨率数据，并回答这个比率有什么好处的问题，它可以让你看看它是否是例如视网膜显示类型的高分辨率设备。

wh:768x1024 cwh:768x905 rwh:1536x2048 ts:touch

结合触摸测试检查这个相关的SO：

我可以很好地了解我们真实用户正在运行的设备的实际屏幕/触摸规格。

当然，对于网络内容，您真正感兴趣的是实际浏览器内部窗口的大小，即您在设备上分配的空间。顺便说一句，我已经看到苹果设备似乎总是提供纵向模式尺寸，例如，768 x 1024 用于非视网膜显示器 iPad，这有点烦人，因为我还希望了解大多数用户实际上是如何与网络和我们的网站互动。

Android 似乎给出了那一刻的实际宽度/高度，即横向或纵向宽度/高度。

例如：

var ratio = window.devicePixelRatio || 1;
var is_touch_device = 'ontouchstart' in document.documentElement;
var touch_status = (is_touch_device) ? 'touch' : 'no-touch';
touch_status = ' ts:' + touch_status;
var width_height = 'wh:' + screen.width + 'x' + screen.height;
var client_width_height = ' cwh:' + document.documentElement.clientWidth + 'x' + document.documentElement.clientHeight;
var rw = screen.width * ratio;
var rh = screen.height * ratio;
var ratio_width_height = ' r:' + ratio + ' rwh:' + rw + 'x' + rh;
var data_string = width_height + client_width_height + ratio_width_height + touch_status;

这会创建大量有关客户端系统的数据，然后您可以使用您喜欢的任何方法将其传递给某些东西。

更新：使用此方法只需几分钟即可找到苹果设备实际报告其宽度/高度的方式：

wh:375x667 cwh:667x375 r:2 rwh:750x1334 ts:touch Device type: mobile

如您所见，该document.documentElement.clientWidth方法报告纵向/横向的实际宽度，好东西。

于 2015-04-08T02:32:59.330 回答
2

这也适用于移动 设备

screen_width = document.documentElement.clientWidth;
screen_heght = document.documentElement.clientHeight;
于 2014-03-04T10:56:15.453 回答
1

您可以使用window.screen.width和window.screen.height来检测设备的屏幕分辨率。

于 2013-06-28T07:59:22.307 回答