媒体查询和浏览器缩放
媒体查询和浏览器缩放
提问于 2014-08-08 07:56:43
长版本
我已经为两个设备建立了一个响应性的网页设计。简单的例子：
<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" />在所有主要的浏览器上，平板电脑(用引导带3构建)都能正常工作。我唯一的问题是，为了提高可读性，这个世界上仍然有人将浏览器放大到150+%。这不是问题，页面仍然正常工作。
只有一个问题--浏览器在网页浏览器中放大的150+%上加载"tablet“视图。AFAIK --这是正常的行为，因为视口中可用的像素较少，相应的媒体查询将加载tablet.css文件，就像手动调整浏览器屏幕的大小一样。
我想通过强制桌面视图来对抗这种行为，即使在放大时也是如此。谁能给我指明正确的方向？
TLDR:，我为平板电脑和桌面提供了一个RWD扩展。桌面浏览器缩放150% =平板视图。如何防止桌面放大时的平板电脑视图？
注意：
- 我正在使用viewport标记
- 不，这不是这里解释的问题(http://blog.55minutes.com/2012/04/media-queries-and-browser-zoom/)
- 我尝试过使用
media="screen and (min-device-width: 1200px)，但该选项使我无法在桌面上“测试”平板视图，因为“调整屏幕大小”根本无法工作(设备宽度=192‘t)
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-08-08 13:52:59
这可能会成功的。这不是我会考虑做的事情，因为如果一个用户总是被放大，他们已经习惯了不一样的东西，我认为如果你的网站是流动的和响应的，这不是什么大问题。你可能会得到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元素上的类进行硬编码来进行快速测试：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25198573
复制相关文章
相似问题
腾讯云开发者
