Javascript 在移动网站上获取屏幕分辨率
我正在设计一个移动网站,有一个下载壁纸的部分。为了适应许多用户,我希望能够根据屏幕分辨率下载壁纸。我想从JavaScript中检测分辨率并显示适当的墙纸 这是我在网上找到的,我尝试过但失败了xD:Javascript 在移动网站上获取屏幕分辨率,javascript,mobile,Javascript,Mobile,我正在设计一个移动网站,有一个下载壁纸的部分。为了适应许多用户,我希望能够根据屏幕分辨率下载壁纸。我想从JavaScript中检测分辨率并显示适当的墙纸 这是我在网上找到的,我尝试过但失败了xD: width = window.innerWidth || document.body.clientWidth height = window.innerHeight || document.body.clientHeight; 对于分辨率为720x1280的SGS3,我使用的是360x567 如
width = window.innerWidth || document.body.clientWidth
height = window.innerHeight || document.body.clientHeight;
对于分辨率为720x1280的SGS3,我使用的是360x567
如何从JavaScript中发现手机的分辨率?您可能可以使用
屏幕
对象:
var w = screen.width;
var h = screen.height;
更新-尝试在窗口中使用它。devicePixelRatio
:
var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio;
var h = screen.height * ratio;
您可以使用
window.screen.width
和window.screen.height
来检测设备的屏幕分辨率。这也适用于移动设备
screen_width = document.documentElement.clientWidth;
screen_heght = document.documentElement.clientHeight;
肯·费斯滕伯格,好东西,谢谢。我在寻找一种简单的方法来检测所有可能的屏幕大小和分辨率数据,并回答这个比率有什么好处的问题,它让你看看它是否是一个视网膜显示类型的高分辨率设备
wh:768x1024 cwh:768x905 rwh:1536x2048 ts:touch
结合触摸测试,检查以下相关内容:
我可以很好地了解我们真正用户正在运行的设备的实际屏幕/触摸规格
当然,对于web内容,您真正感兴趣的是实际浏览器内部窗口的大小,即在设备上分配的空间。顺便说一句,我已经看到苹果设备似乎总是提供肖像模式的尺寸,例如,对于非视网膜显示的iPad,768 x 1024,这有点烦人,因为我还希望了解大多数用户实际上是如何与web和我们的网站交互的
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
方法报告了纵向/横向的实际宽度,这是很好的东西。这会返回两倍更小的分辨率,360x640:(太好了,肯,这样做了:)非常感谢,我已经为此挣扎了很长时间:)屏幕一直不可靠。不要试图检测用户可以选择的内容。@Ken添加比率的目的是什么?@jimirings用于使用不同于正常1:1比率的屏幕(即视网膜屏幕为2:1),在这种情况下,您需要相应地缩放w/h以填充相同的空间。这将返回两倍更小的分辨率,360x640:(您不应该为此使用客户端脚本。您不能假设它可用或提供正确的值。让用户选择他们需要的内容。我这样做是为了让用户更容易,如果不是,它将返回默认分辨率。只要您让他们选择就可以了。请尝试window.screen.availWidth
和>window.screen.availHeight