javascript 在移动网站上获取屏幕分辨率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17359915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get screen resolution on a mobile website
提问by Banana
I am designing a mobile website that has a section to download wallpapers from. In order to accommodate many users, I wish to make it possible to download a wallpaper based on the screen resolution. I want to detect resolution from JavaScript and show the appropriate wallpaper.
我正在设计一个移动网站，其中有一个部分可以从中下载壁纸。为了容纳很多用户，我希望可以根据屏幕分辨率下载壁纸。我想从 JavaScript 检测分辨率并显示适当的壁纸。
This is what I found online and tried and failed xD:
这是我在网上找到的并尝试过但失败的 xD：
width = window.innerWidth || document.body.clientWidth
height = window.innerHeight || document.body.clientHeight;
For my SGS3, which has the resolution 720x1280 I get the 360x567.
对于分辨率为 720x1280 的 SGS3，我得到了 360x567。
How should I discover the resolution of the phone from JavaScript?
我应该如何从 JavaScript 中发现手机的分辨率？
回答by
You can perhaps use the screenobject:
您也许可以使用该screen对象：
var w = screen.width;
var h = screen.height;
Update- Try to use it with the window.devicePixelRatio:
更新- 尝试使用它window.devicePixelRatio：
var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio;
var h = screen.height * ratio;
回答by Lizardx
Ken Fyrstenberg, great stuff, thanks. I was looking for an easy way to detect all the possible screen size and resolution data, and to answer the question of what the ratio is good for, it lets you see if it's for example a retina display type high resolution device.
Ken Fyrstenberg，很棒的东西，谢谢。我一直在寻找一种简单的方法来检测所有可能的屏幕尺寸和分辨率数据，并回答这个比率有什么好处的问题，它让你看看它是否是一个视网膜显示类型的高分辨率设备。
wh:768x1024 cwh:768x905 rwh:1536x2048 ts:touch
combined with the touch tests check this related SO:
结合触摸测试检查这个相关的SO：
I can get a very good sense of the actual screen/touch specs of the devices our real users are running.
我可以很好地了解我们的真实用户正在运行的设备的实际屏幕/触摸规格。
for web stuff, of course, what you really are interested in is the size of the actual browser inner window, the space you are allotted on the device that is. Just as an aside, I've already seen that apple devices appear to always give the portrait mode dimensions, eg, 768 x 1024 for a non retina display iPad, which is a bit annoying because I was hoping to also learn how most users actually interact with the web and our site.
当然，对于网络内容，您真正感兴趣的是实际浏览器内部窗口的大小，即您在设备上分配的空间。顺便说一句，我已经看到苹果设备似乎总是提供纵向模式尺寸，例如，768 x 1024 用于非视网膜显示 iPad，这有点烦人，因为我还希望了解大多数用户的实际情况与网站和我们的网站互动。
Android seems to give the actual width/ height of that moment, ie, either landscape or portrait width/height.
Android 似乎给出了那个时刻的实际宽度/高度，即横向或纵向宽度/高度。
For example:
例如：
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;
This creates a lot of data about the client system which you can then pass to something using whatever method you like.
这会创建大量有关客户端系统的数据，然后您可以使用任何您喜欢的方法将这些数据传递给某些内容。
UPDATE: It just took a few minutes using this method to find how apple devices actually report their width/height:
更新：使用这种方法只需要几分钟就可以找到苹果设备如何实际报告它们的宽度/高度：
wh:375x667 cwh:667x375 r:2 rwh:750x1334 ts:touch Device type: mobile
As you can see, the document.documentElement.clientWidthmethod reports the actual width if portrait/landscape, good stuff.
如您所见，document.documentElement.clientWidth如果纵向/横向，该方法报告实际宽度，好东西。
回答by Jan Dürrer
This will work in mobil devicetoo
这将在工作美孚设备太
screen_width = document.documentElement.clientWidth;
screen_heght = document.documentElement.clientHeight;
回答by Strille
You can use window.screen.widthand window.screen.heightto detect the screen resolution of the device.
您可以使用window.screen.width和window.screen.height来检测设备的屏幕分辨率。
