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 +％放大的webbrowser上加载“平板电脑”视图。 AFAIK这是正常行为，因为视口中可用的像素较少，相应的媒体查询会加载tablet.css文件，就像手动调整浏览器屏幕大小一样。

我想通过强制桌面视图来抵制这种行为，即使在放大时也是如此。有人能指出我正确的方向吗？

TLDR： 我有平板电脑和台式机的RWD缩放。桌面浏览器缩放150％=平板电脑视图。放大时如何防止桌面平板电脑查看？

注意：

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

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

然后加载或不加载，这是一个例子，如果没有必要，你可以删除第二个：

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

});

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

媒体查询和浏览器缩放

1 个答案:

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