什么类型的设备正在查看我的网站？

Question

你好，我正在尝试制作一个响应式网站，我想找到一种方法来检查查看页面的设备是个人电脑、平板电脑还是 phone。

到目前为止，我能找到的唯一解决方案是以下变体：

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

如有错误请指正，但设备像素密度差异太大，这不能保证任何事情，而且还需要根据更高的新屏幕开发定期更新像素密度。

我希望有一个函数可以为您提供以实际物理英寸为单位的屏幕尺寸，或者您可以调用一个变量，它会告诉您设备的类型。

目标是拥有一段代码，我永远不必更新，但无论设备类型如何，它都能正常工作。我支持任何语言，但我最擅长 html、css 和 javascript。

提前致谢！

Answer 1

您可以使用媒体查询：media-queries 或者试试：responsive webdesign via media-queries @ Whosebug

Answer 2

我找到了一个简单的方法来做到这一点。 我在桌面站点的 header 中添加了这段代码：

if (screen.width <= 800)
{
    window.location.href = "http://www.sandbergcykler.dk/mobile/";
}

如果宽度小于 800 像素的设备进入，它将被重定向到网站的 mobile-friendly 版本。在我的移动网站上，我做了相反的事情，以防万一 desktop-device 应该访问它：

if (screen.width >= 801)
{
    window.location.href = "http://www.sandbergcykler.dk/";
}

当手机开始变得非常高时，此方法将被弃用 screen-resolutions，但到目前为止，它运行得非常好！

如果您愿意，可以在自己的设备上进行测试：

if (screen.width <= 800) {
  document.getElementById("p").innerHTML = "You're a mobile";
}

if (screen.width >= 801) {
  document.getElementById("p").innerHTML = "You're a desktop";
}

<p id="p"></p>