Question

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

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

感谢您抽出宝贵时间。

Answer 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);
};

希望这有帮助！：）

Answer 2

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

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

分辨率过高时检测移动设备

2 个答案: