除非使用开发人员工具，否则网站无法正确缩放

Question

我有一个Web应用程序，其中包含许多需要保持不变的动画。因此，为了使站点具有响应性，我一直在使用以下代码：

@media all and (max-width: 1280px) and (max-height: 720px) {
	   html {
		  -webkit-transform: scale(.5);
		  -moz-transform: scale(.5);
		  transform: scale(.5);

	   }
	}

<div style="width: 700px; height: 700px; background-color: green;"></div>

（最好在整页中查看摘要）

当浏览器正常显示代码并调整其大小时，什么也没有发生，但是当我进入开发人员工具并使用移动响应版本时，突然缩放就可以了。

是什么原因造成的？

Answer 1

发生这种情况是因为媒体查询检测到 屏幕 的大小，而不是视口/浏览器窗口的大小。如果转到Dev Tools并调整其大小，它将修改查询的屏幕视图，并使代码认为屏幕是可移动的。调整浏览器窗口的大小没有效果。