基于 PHP/javascript 中的用户代理的物理屏幕尺寸“检测”

Physical screen size 'detection' based off user agent in PHP/javascript

提问by John Hunt

So, there are ways to detect 'mobile' browsers and screen sizes using javascript and php.. however, the screen size is always returned in pixels and mobile can mean anything these days.

因此，有一些方法可以使用 javascript 和 php 检测“移动”浏览器和屏幕尺寸。但是，屏幕尺寸始终以像素为单位返回，而如今移动设备可能意味着任何事情。

I want to be able to know how big a device display is when it's mobile, what with tablets popping up everywhere. The reason for this is because I want to select a stylesheet for devices with small screens and default to the normal stylesheet for everything else. For example, I want an iPad, kindle fire, hp touchpad etc. to display the normal stylesheet but I want a different stylesheet for cellphones or any device that has a display about the size of a human hand.

我想知道移动设备的显示屏有多大，平板电脑随处可见。这样做的原因是因为我想为小屏幕的设备选择一个样式表，而其他一切都默认为普通样式表。例如，我想要一个 iPad、kindle fire、hp 触摸板等来显示普通样式表，但我想要一个不同的样式表用于手机或任何具有人手大小的显示器的设备。

Now, I'm guessing something to do this doesn't exist but perhaps someone's thought of a better way or knows of a database somewhere that has dimensions for screen sizes somewhere..hmm

现在，我猜测不存在可以执行此操作的方法，但也许有人想到了更好的方法或知道某个数据库在某处具有屏幕尺寸的尺寸……嗯

..maybe there's a way of finding pixel density and then applying the screen width/height in pixels to this..

..也许有一种方法可以找到像素密度，然后将屏幕宽度/高度（以像素为单位）应用于此..

回答by Andz

I actually think this is a very good question. The unsatisfactory situation right now is that on 10" tablets you get served a giant, space-wasting single-column "mobile" site by default when the desktop version would have been just fine.

其实我觉得这是一个很好的问题。现在令人不满意的情况是，在 10 英寸平板电脑上，默认情况下您会得到一个巨大的、浪费空间的单栏“移动”网站，而桌面版本来就可以。

Unfortunately, as John Hunt has discovered, even WURFL does not give accurate physical screen size.

不幸的是，正如 John Hunt 所发现的，即使是 WURFL 也不能给出准确的物理屏幕尺寸。

One semi-workaround is a heuristic assuming that if either the x or y dimension is less than 768 pixels then you are on a phone(*) and thus serve the single-column "mobile" version of your site by default.

一种半解决方法是一种启发式方法，假设如果 x 或 y 维度小于 768 像素，那么您使用的是电话 (*)，因此默认情况下为您网站的单列“移动”版本提供服务。

You should still always allow the visitor to choose between mobile or desktop. Better still, just call it the "single-column" or "slim-width" version of your site to avoid misnomers.

您仍然应该始终允许访问者在移动设备或桌面设备之间进行选择。更好的是，只需将其称为您网站的“单列”或“窄幅”版本，以避免用词不当。

(*) Why 768 pixels? Because all 10" tablets of any importance are at least 1024x768 or 1280x800, whereas even phones with big screens such as the iPhone 5 or HTC HD5 have widths less than 768 pixels (iPhone 5 - 640x1136, HTC HD5 1280x720). This will probably not work on the giant samsung screens, but on those devices, having the desktop version served by default is not as annoying.

(*) 为什么是 768 像素？因为任何重要的 10" 平板电脑都至少是 1024x768 或 1280x800，而即使是大屏幕手机，例如 iPhone 5 或 HTC HD5，其宽度也小于 768 像素（iPhone 5 - 640x1136，HTC HD5 1280x720）。这可能不会在巨大的三星屏幕上工作，但在这些设备上，默认使用桌面版本并不那么烦人。

回答by Bob W

When using wordpress, the wp_is_mobile function has the same problem as it will set the "mobile" flag for tablets and phones. My problem is I want phones to get a limited page without my top of page image slider to speed up the site download/draw. Tablets usually have faster wifi access rather than 3G or effectively slower than wifi 4g.

使用 wordpress 时， wp_is_mobile 函数有同样的问题，因为它会为平板电脑和手机设置“移动”标志。我的问题是我希望手机在没有我的页面顶部图像滑块的情况下获得有限的页面以加快站点下载/绘制。平板电脑的 wifi 访问速度通常比 3G 快，或者实际上比 wifi 4g 慢。

The responsive wordpress theme, Customizr, I'm using uses the auto adapting twitter bootstrap, but still runs too slowly on phones with big image pages. So the question for my site is not just screen size or resolution, but data and screen draw speed.

我正在使用的响应式 wordpress 主题 Customizr 使用自动适应 twitter 引导程序，但在具有大图像页面的手机上运行速度仍然太慢。所以我网站的问题不仅仅是屏幕尺寸或分辨率，还有数据和屏幕绘制速度。

Rocco Aliberti in this forum on themesandco's website made a useful suggestion combining a browser detection plugin that sets up an is_tablet function then combining it with the built in wordpress wp_is_mobile function to get "wp_is_mobile() && !is_tablet()" -e.g. the device is mobile and is not a tablet. http://www.themesandco.com/support-forums/topic/jetpack-mobile-issue/#post-23308

Rocco Aliberti 在 themesandco 网站的这个论坛上提出了一个有用的建议，结合浏览器检测插件设置 is_tablet 函数，然后将其与内置的 wordpress wp_is_mobile 函数结合以获得“wp_is_mobile() && !is_tablet()” - 例如设备是移动设备，而不是平板电脑。 http://www.themesandco.com/support-forums/topic/jetpack-mobile-issue/#post-23308

回答by Sumit

you can check the screen size through javascript innerWidthgives/return the width of the device whether you are in the desktop or mobile phones, more filter you can you an user agent with this javascript innerWidthcode.

您可以通过javascript检查屏幕大小innerWidth，无论您是在台式机还是手机中，都可以给出/返回设备的宽度，更多过滤器可以使用此javascriptinnerWidth代码作为用户代理。

then after that you can apply the css on the basis of screen sized.

然后，您可以根据屏幕大小应用 css。

回答by John Hunt

The right answer I think it's to use a responsive layout approach as you'll never get it right for all the various devices (there are 100s of new ones every day..)

我认为正确的答案是使用响应式布局方法，因为您永远不会在所有各种设备上都得到正确的答案（每天都有 100 多个新设备......）

回答by Anirudh Zala

You can use frameworks like Bootstrap that show/hide columns or data based on screen resolution. This works nice as far as just displaying is concerned.

您可以使用像 Bootstrap 这样的框架来根据屏幕分辨率显示/隐藏列或数据。就显示而言，这很好用。

But ideally you would also want your scripting language to know this so that it would not process/execute certain data which is not going to get displayed by bootstrap.

但理想情况下，您还希望您的脚本语言知道这一点，以便它不会处理/执行某些引导程序不会显示的数据。

At this moment browser agent does not provide screen resolution. Which should be enabled as modern websites have to be responsive to at least popular mobile, tablet and computer.

此时浏览器代理不提供屏幕分辨率。这应该启用，因为现代网站必须至少响应流行的移动设备、平板电脑和计算机。

This is my wishlist for future versions of HTTP/W3c/Browser implementation.

这是我对未来版本的 HTTP/W3c/Browser 实现的愿望清单。

回答by John Hunt

http://wurfl.sourceforge.net/nphp/

http://wurfl.sourceforge.net/nphp/

Looks like you canget this infomation from the WURFL API..cool!

看起来您可以从 WURFL API 获取此信息..酷！