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

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

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

感谢您抽出宝贵时间。

【问题讨论】:

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

标签: html css media-queries responsive


【解决方案1】:

您可以在媒体查询中使用-webkit-min-device-pixel-ratio 检查实际的像素比率。例如,Galaxy S4 及更高版本的-webkit-device-pixel-ratio4,而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">

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-04-03
    • 2017-07-03
    • 2013-10-16
    • 2020-06-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多