2011-01-28 66 views
5

这听起来有点太好了,所以请告诉我,如果是这样。通过屏幕分辨率检测移动设备有多可靠?

如果我只有一个移动网站的单一版本( 不同设备的变体,所有移动设备只有一个网站), 通过屏幕分辨率检测移动设备的可靠程度如何?

,只是充当了移动版本,如果屏幕分辨率<不如说是400像素。

注:我的问题是假设启用javascript。此外,我知道有 用户代理检测,但我想没有它。

+3

为什么你想不做用户代理检测?使用尽可能多的变量来确定这样的事情是有意义的。另外,如果您尝试定位某些设备,即“我想确保Windows Mobile Phones获得特殊待遇”,那么我认为用户代理检测比屏幕分辨率更可靠。 另外,我想补充一点,用户代理检测将使测试更容易。 但是,使用屏幕分辨率非常好,因为它是一种功能检测,使用该信息显示网站的“小屏幕”版本非常可靠。 – nedk 2011-01-28 14:08:46

回答

3

你会想通过媒体查询服务不同的样式表。您可以使用查询来识别屏幕宽度,并只为某些设备提供某些CSS。比如这个查询将起到iphone.css只能识别为具有iphone的典型尺寸的装置:

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

有关于这个问题了详细的文章在alistapart

请记住尽管这不所有设备都能识别媒体查询如果您需要支持大量的旧设备像黑莓和翻盖手机,你应该采取劝以上对UA检测 - 我知道这感觉错了,如果你从桌面开发的世界来,但我们真的要使用我们的工具可用于我们和移动Web正在增长,但在许多方面仍然是一个新的视野。

0

可能不会伤害到这个功能添加到您的网站为那些谁是确实在他们的移动设备上运行启用JavaScript的Web浏览器。至于那些没有的人,那么你可以对他们做些什么,除了让他们在第一次加载时选择屏幕尺寸之类的简单事情?也许一个简单的下拉列表可能的大小?

1

我来到这里是因为我有同样的想法和问题,类似的情况 - 该网站已经需要JavaScript,我做了一个尺寸适合所有的移动网络应用程序,至少目前是这样。我们的发布周期非常长 - 在代码测试和发布时,任何UA检测硬编码都会过时。由于这个替代接口的目的是使它在较小的屏幕上工作,所以使用该测试似乎是有意义的。 但是,我不知道,我会选择多大的尺寸 - 我有一个预感移动设备没有绑定(即使是惯例)到特定的屏幕尺寸。我想我们只需要决定主要网页不再起作用。

我能理解别人的犹豫到这种做法,因为有时也有与不仅仅是屏幕尺寸的移动设备上的标准场地等问题。不过,我认为这种检测有一个优势。如果你唯一的问题是屏幕尺寸,我认为这是一个好方法。

4

高度的Javascript移动设备屏幕检测根本不可靠。问题在于不同的浏览器使用不同数量的“chrome”,而不同的操作系统版本对系统栏使用不同的高度。所有的检测机制报告不可靠的高度(screen.height,window.outerHeight,window.innerHeight等等)

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

这里阅读最优秀的分析报告:

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

0

这取决于你想要达到的目标。

如果你设计不同的屏幕分辨率,不管设备类型然后它是很好的使用分辨率范围。

如果您为特定设备类型(手机,平板电脑等)设计了并假定分辨率范围始终匹配单个设备类型,那么它最终会中断。

你在你的例子使用的400px门槛,银河S8 +报告412x846与此代码:

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

设备分辨率改变每一年,他们开始互相重叠。大型手机的分辨率高于小型平板电脑,大型平板电脑的分辨率高于某些台式机。

如果您只是希望它能够正常工作,或者您想要检测特定的手机,您可能会得到它。

然而,仅使用屏幕分辨率来检测设备类型并不可靠。