长版
我为两个设备构建了一个响应式网页设计。以下是简化的示例:
<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)