媒体查询和浏览器缩放

Question

长版

我为两个设备构建了一个响应式网页设计。以下是简化的示例：

<link rel="stylesheet" media="screen and (min-width: 769px) and (max-width: 1199px)" href="tablet.css" />
<link rel="stylesheet" media="screen and (min-width: 1200px)" href="wide.css" />

这在所有主要浏览器、平板电脑（使用Bootstrap 3构建）上都能正常工作。我唯一的问题是，仍然有人将他们的浏览器缩放到150%以上以增加可读性。这不是问题，页面仍然可以正常工作。

只有一个问题-当网络浏览器缩放到150%以上时，会在“平板电脑”视图中加载浏览器。据我所知，这是正常行为，因为在视口中可用的像素较少，适当的媒体查询会加载tablet.css文件，就像手动调整浏览器屏幕大小一样。

我想通过强制使用桌面视图来抵消这种行为，即使缩放了也可以。有谁能指点我方向吗？

TLDR：我有一个RWD缩放平板电脑和桌面电脑。桌面浏览器缩放150%=平板电脑视图。如何防止桌面在缩放时出现平板电脑视图？

注意：

• 我正在使用viewport meta标签
• 不，这里解释的问题不是这个(http://blog.55minutes.com/2012/04/media-queries-and-browser-zoom/)
• 我尝试使用media="screen and (min-device-width: 1200px)，但这个选项使我无法在桌面上“测试”平板电脑视图，因为“调整”屏幕根本不起作用（设备宽度=1920px）

- Erik J.

---

我不会改变正常行为，但首先从嗅探缩放开始，https://dev59.com/0XI-5IYBdhLWcg3wta1q#6365777，如果它有效，那么我猜可以编写一个脚本加载一个没有媒体查询的桌面 CSS 文件。只是猜测。 - Christina

实际上这将起作用：在移动设备（手机和平板电脑）上使用服务器端检测，加载响应式CSS和视口meta标记，并在桌面设备上加载流体但不是响应式的CSS文件。 这将是最简单的方法：http://mobiledetect.net/ - Christina

@BootstrapThemer 我刚试了一下，但是那样会排除其他设备（高密度和高端平板电脑）。问题在于我不能使用服务器端检测（Sharepoint 2013 on-premises中的后台系统 - 如果您不知道它，当涉及到这些事情时，几乎没有自定义编码的可能性 - 我必须找到一个仅适用于桌面浏览器的CSS / JS解决方案）。谢谢你的想法。 - Erik J.

Answer 1

这个方法可能可行。但我不会考虑使用它，因为如果用户经常缩放页面，他们已经习惯了网站的样式不同寻常，如果你的网站是流动和响应式的，那么我并不认为这是一个大问题。你可能会遇到FOUC问题。

首先为你的样式表创建一个id：

<link id="responsivecss" href="responsive.css" rel="stylesheet" type="text/css" />
<link id="desktopcss" href="desktop.css" rel="stylesheet" type="text/css" />

使用脚本来检测触摸和非触摸。这在Android、IOS和Windows上对我很有效。

/* __________________ SUPPORTS TOUCH OR NOT  __________________*/
/*! Detects touch support and adds appropriate classes to html and returns a JS object  |  Copyright (c) 2013 Izilla Partners Pty Ltd  | http://www.izilla.com.au / Licensed under the MIT license  |  https://coderwall.com/p/egbgdw */
var supports = (function() {
    var d = document.documentElement,
        c = "ontouchstart" in window || navigator.msMaxTouchPoints;
    if (c) {
        d.className += " touch";
        return {
            touch: true
        };
    } else {
        d.className += " no-touch";
        return {
            touch: false
        };
    }
})();

然后加载或不加载，这只是一个例子，如果不必要，可以删除第二个if语句：

$(document).ready(function () {
    if ($('html').hasClass('touch')) { 
      $('#desktopcss').prop('disabled',true);
    }
      if ($('html').hasClass('no-touch')) { 
      $('#responsivecss').prop('disabled',true);
    }

}); 

快速演示，我还没有测试实际的触摸设备，但您可以通过在HTML元素上硬编码类来进行快速测试：

http://jsbin.com/gamir/1/edit

- Christina

---

谢谢@BootstrapThemer - 我会尝试一下并在这里回来（可能是在周末之后）。再次感谢！ - Erik J.

这就是我最终使用的（抱歉回复晚了）。 - Erik J.