分辨率太高时检测手机答案

【问题标题】：Detecting mobile when resolution is too high分辨率太高时检测手机
【发布时间】：2017-10-13 06:11:29
【问题描述】：

我正在尝试使我的网页具有响应性。我知道媒体查询，但是，当使用像三星 Galaxy Note 4 这样具有非常高分辨率的设备时，网页最终看起来很像桌面版本。

我知道有一种方法可以做到这一点，因为当我尝试访问像阿里巴巴这样的已知响应式网站时，它会将我重定向到它的 m.alibaba 版本。这里的预选赛是什么？因为显然它不是决议。

感谢您抽出宝贵时间。

【问题讨论】：

您要重定向到网站的移动版本，还是使用媒体查询？
他们的头部有这个

【解决方案1】：

您可以在媒体查询中使用-webkit-min-device-pixel-ratio 检查实际的像素比率。例如，Galaxy S4 及更高版本的-webkit-device-pixel-ratio 为4，而S3 只有3 的比率。基于此的定位将允许您在每台设备上呈现不同的移动视图。

这是一个仅针对 S3 的示例：

@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {
}

您可以在 this CSS Tricks page 上找到完整设备列表及其相关媒体查询。

请记住在您的 <head> 部分中包含一个 META tag 以允许缩放：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

您所说的实际重定向无法通过 CSS 处理，通常通过 JavaScript 处理。

这可以（粗略地）通过检查window.screen.width来完成：

if (window.screen.width < 1000) {
  window.location = 'm.mysite.com';
}

虽然检查用户代理更安全：

var isMobile = function() {
  console.log("Navigator: " + navigator.userAgent);
  return /(iphone|ipod|ipad|android|blackberry|windows ce|palm|symbian)/i.test(navigator.userAgent);
};

希望这会有所帮助！ :)

【讨论】：

非常感谢。是的，我知道如何重定向，但不知道限定符是什么。我想这是一个微调的问题。有点奇怪，但是在 JS 中移动的限定符是用户代理，但在 css 中，它与比率和分辨率有关。好像有点不协调。有没有办法在 css 中检查媒体查询的用户代理？非常感谢！
据我所知，媒体查询无法专门检查用户代理。但是，考虑到所有移动设备都支持 JavaScript 并且默认启用它，我认为通过它处理重定向是一个相当安全的选择。不要忘记，如果需要，您还可以检查移动设备正在使用的特定 browser！尽管考虑到您可以在原始 CSS 中针对任何给定设备进行定位，但您首先并不需要重定向 :)

【解决方案2】：

您也可以创建一个单独的样式页面并使用它。

<link rel="stylesheet" media="screen and (min-device-width: Device Width)" href="css.css">

【讨论】：