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

【问题标题】：What type of device is viewing my site?什么类型的设备正在查看我的网站？
【发布时间】：2016-07-28 07:43:03
【问题描述】：

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

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

# 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。

提前谢谢你！

【问题讨论】：

您可以使用一些分析服务来查找位置、屏幕类型或位置

标签： responsive-design size screen device

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

如果宽度小于800 像素的设备进入，它会被重定向到适合移动设备的网站版本。在我的移动网站上，我做了相反的事情，以防万一桌面设备访问它：

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

当手机开始获得非常高的屏幕分辨率时，此方法将被弃用，但到目前为止它运行得非常好！

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

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

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

&lt;p id="p"&gt;&lt;/p&gt;

【讨论】：