分辨率太高时检测手机

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

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

感谢您抽出时间。

2017-10-12 George Avgoustis

是否要重定向到该网站的移动版本或使用媒体查询？ – kawnah

他们有这个在他们的头部分 – mlegg

您可以在媒体查询中检查实际的像素比例与-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发现设备及其相关媒体查询的完整列表。

请记住，包括META tag在<head>部分，允许缩放：

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

希望这有助于！ :)

来源

2017-10-12 20:39:53

非常感谢。是的，我知道如何重定向，但不知道这样做的限定词是什么。我想它是一个微调的问题。然而，它有点奇怪，JS中的移动限定符是如何使用用户代理的，但是在CSS中它是关于比率和分辨率的。似乎有点不一致。有没有办法检查用户代理在CSS中的媒体查询？非常感谢！ –

据我所知，媒体查询无法专门针对用户代理进行检查。然而，考虑到所有的移动设备都支持JavaScript并默认启用它，我认为通过它来处理重定向是一个相当安全的选择。不要忘记，如果需要的话，还可以检查移动设备正在使用的特定[**浏览器**]（https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser）！虽然考虑到你可以针对任何给定的原始CSS设备，但你不应该首先需要重定向:) –

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

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

来源

2017-10-12 22:11:29

分辨率太高时检测手机

回答

相关问题