通过屏幕分辨率检测移动设备的可靠性如何？
这听起来有点好得令人难以置信，所以请告诉我是否如此。
如果我只有一个版本的移动网站（没有变体） 不同的设备，所有手机只需一个网站），它的可靠性如何 通过屏幕分辨率检测移动设备？
如果屏幕分辨率 < ，则只需提供移动版本即可。比说400px。
注意：我的问题假设启用了 javascript。另外，我知道有 用户代理检测，但我想不使用它。
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.
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
JavaScript 移动设备屏幕高度检测根本不可靠。问题在于不同的浏览器使用不同数量的“chrome”，并且不同的操作系统版本使用不同的系统栏高度。所有检测机制报告的高度都不可靠（screen.height、window.outerHeight、window.innerHeight - 等），
在所有操作系统中，宽度似乎在 window.outerWidth 上最可靠。
在这里阅读最优秀的分析报告：
http://www.tripleodeon。 com/2011/12/first-understand-your-screen/
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)
Width seems to be most reliable on window.outerWidth across all OS's.
Read a most excellent analytical report here:
http://www.tripleodeon.com/2011/12/first-understand-your-screen/
您将需要研究通过媒体查询提供不同的样式表。您可以使用查询来识别屏幕宽度，并仅向某些设备提供某些 CSS。例如，此查询将仅向被标识为具有 iphone 典型尺寸的设备提供 iphone.css：
alistapart
请记住，并非所有设备都能识别媒体查询。如果您需要支持许多较旧的设备，例如黑莓和翻盖手机，您应该采纳上面关于使用 UA 检测的建议 - 我知道如果您来自桌面开发世界，这感觉不对，但实际上我们必须使用我们拥有的工具移动网络正在不断发展，但在许多方面仍然是一个新的领域。
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:
There's a detailed article on this subject over at 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.
我来到这里是因为我有同样的想法和问题，以及类似的情况 - 该网站已经需要 JavaScript，而我正在做一个通用的移动网络应用程序，至少目前是这样。我们的发布周期确实很长——我硬编码的任何 UA 检测在代码测试和发布时都会有些过时。由于这个备用界面的目的是使其在较小的屏幕上工作，因此使用该测试似乎是有意义的。
然而，我不知道我会选择什么尺寸 - 我有预感移动设备不会（即使按照惯例）绑定到特定的屏幕尺寸。我想我们只需要决定主网页在什么时候不再起作用。
我可以理解其他人对这种方法的犹豫，因为有时移动设备上的标准网站除了屏幕尺寸之外还存在其他问题。不过，我认为这种检测有一个优点。如果您唯一的问题是屏幕尺寸，我认为这是一个好方法。
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.
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.
对于那些确实在移动设备上运行支持 JavaScript 的 Web 浏览器的人来说，将此功能添加到您的网站可能不会有什么坏处。至于那些不喜欢的人，除了让他们在第一次加载时选择屏幕尺寸等简单的事情之外，你对他们无能为力？也许是一个包含可能大小的简单下拉列表？
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?
这取决于您想要实现的目标。
如果您无论设备类型如何都针对不同的屏幕分辨率进行设计，那么使用分辨率范围就可以了。
如果您针对特定设备类型（手机、平板电脑等）进行设计，并假设分辨率范围始终与单一设备类型匹配，那么它最终会崩溃。
您在示例中使用了
400px阈值，Galaxy S8+ 使用以下代码报告412x846：设备分辨率每年都在变化，并且它们开始相互重叠。大型手机比小型平板电脑具有更高的分辨率，大型平板电脑比某些台式机具有更高的分辨率。
如果你只是想让它大部分工作或者如果你想检测特定的手机，你可能会侥幸逃脱。
然而，仅使用屏幕分辨率来检测设备类型并不可靠。
It depends on what you want to achieve.
If you design for different screen resolutions regardless of device type then 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+ reports412x846with this code: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 alone to detect the device type.