javascript 通过屏幕分辨率检测移动设备的可靠性如何？

How reliable is detecting mobile devices by screen resolution?

提问by CodeVirtuoso

This sounds a bit too good to be true, so please tell me if it is.

这听起来有点好得令人难以置信，所以请告诉我是否如此。

If I have just one single version of a mobile website (no variations for different devices, just one website for all mobiles), how reliable it is to detect mobile devices by screen resolution?

如果我只有一个移动网站版本（不同设备没有变化，所有手机只有一个网站），通过屏幕分辨率检测移动设备的可靠性如何？

And simply serve the mobile version if screen resolution is < than say 400px.

如果屏幕分辨率小于 400 像素，则只需提供移动版本。

NOTE: My question assumes that javascript is enabled. Also,I'm aware there's user agent detection, but I'd like to do without it.

注意：我的问题假设启用了 javascript。另外，我知道有用户代理检测，但我想没有它。

采纳答案by Jim Amos

You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:

您将需要研究通过媒体查询提供不同的样式表。您可以使用查询来识别屏幕宽度，并且只为某些设备提供某些 css。例如，此查询将仅向标识为具有 iphone 典型尺寸的设备提供 iphone.css：

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

There's a detailed article on this subject over at alistapart

在alistapart上有一篇关于这个主题的详细文章

Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.

请记住，并非所有设备都能识别媒体查询。如果您需要支持许多旧设备，例如黑莓手机和翻盖手机，您应该接受上面关于使用 UA 检测的建议 - 我知道如果您来自桌面开发世界，这感觉是错误的，但实际上我们必须使用我们拥有的工具对我们来说，移动网络正在不断发展，但在许多方面仍然是一个新的视野。

回答by user1682943

Javascript mobile device screen detection for height is not reliable at all. The problem is that different browsers use different amounts of 'chrome' and different OS versions use different heights for the system bar. All the detection mechanism report unreliably for height (screen.height, window.outerHeight, window.innerHeight - etc,etc)

Javascript 移动设备屏幕高度检测根本不可靠。问题是不同的浏览器使用不同数量的“chrome”，不同的操作系统版本对系统栏使用不同的高度。所有检测机制都不可靠地报告高度（screen.height、window.outerHeight、window.innerHeight - 等等）

Width seems to be most reliable on window.outerWidth across all OS's.

宽度在所有操作系统的 window.outerWidth 上似乎最可靠。

Read a most excellent analytical report here:

在此处阅读最出色的分析报告：

http://www.tripleodeon.com/2011/12/first-understand-your-screen/

http://www.tripleodeon.com/2011/12/first-understand-your-screen/

回答by Dovev Hefetz

I came here because I had the same idea and question, and similar situation - the website already requires JavaScript and I'm doing a one-size-fits-all mobile web app, at least for now. Our release cycle is really long - any UA detection I hard-code will be somewhat obsolete by the time the code is tested and released. Since the purpose of this alternate interface is to make it work on smaller screens, it would seem to make sense to use that test. I don't know however, what size I would pick - I have a hunch mobile devices are not bound (even by convention) to particular screen dimensions. I guess we just have to decide at what point the main web page is no longer functional.

我来到这里是因为我有相同的想法和问题，以及类似的情况——网站已经需要 JavaScript，我正在做一个通用的移动网络应用程序，至少现在是这样。我们的发布周期真的很长——我硬编码的任何 UA 检测都会在代码测试和发布时有点过时。由于此备用界面的目的是使其在较小的屏幕上工作，因此使用该测试似乎很有意义。但是，我不知道我会选择什么尺寸 - 我有一种预感，移动设备不受（即使按照惯例）特定屏幕尺寸的限制。我想我们只需要决定主网页在什么时候不再起作用。

I can understand other people's hesitation to this approach because sometimes there are other issues with a standard site on a mobile device than just the screen size. However, I think there is an advantage to this kind of detection. If your only issue is the screen size, I think it is a good way to go.

我可以理解其他人对这种方法的犹豫，因为有时移动设备上的标准网站还存在其他问题，而不仅仅是屏幕尺寸。但是，我认为这种检测是有优势的。如果您唯一的问题是屏幕尺寸，我认为这是一个好方法。

回答by DoctorLouie

Probably not going to hurt to add this functionality to your website for those who are indeed running JavaScript enabled web browsers on their mobile devices. As for those who are not, well there's little you can do about them, other than something simple like letting them select their screen size at first load? Maybe a simple drop down list with possible sizes?

对于那些确实在其移动设备上运行支持 JavaScript 的网络浏览器的人来说，将此功能添加到您的网站可能不会受到伤害。对于那些不是的人，除了让他们在第一次加载时选择屏幕尺寸之类的简单事情之外，您对他们几乎无能为力？也许是一个可能大小的简单下拉列表？

回答by Jens

It depends on what you want to achieve.

这取决于您想要实现的目标。

If you design for different screen resolutions regardless of device typethen it is fine to use resolution ranges.

如果您设计不同的屏幕分辨率而不管设备类型，那么使用分辨率范围就可以了。

If you design for specific device types (phone, tablet, etc.) and assume a resolution range will always match a single device type, then it will eventually break.

如果您针对特定设备类型（手机、平板电脑等）进行设计并假设分辨率范围始终与单个设备类型匹配，那么它最终会崩溃。

You used a 400pxthreshold in your example, the Galaxy S8+ reports 412x846with this code:

您400px在示例中使用了阈值，Galaxy S8+412x846使用以下代码报告：

console.log("width: " + screen.width + ", height: " + screen.height);

Device resolutions change every year and they are starting to overlap with each other. Large phones have higher resolutions than small tablets and large tablets have higher resolution than some desktops.

设备分辨率每年都在变化，并且它们开始相互重叠。大型手机比小型平板电脑具有更高的分辨率，大型平板电脑比某些台式机具有更高的分辨率。

You may get away with it if you just want it to mostly work or if you want to detect specific phones.

如果您只是想让它主要工作或者您想检测特定的手机，则可能会侥幸逃脱。

However it is not reliable to use screen resolution aloneto detect the device type.

然而，单独使用屏幕分辨率来检测设备类型是不可靠的。