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

Question

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

@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

发生这种情况是因为媒体查询检测的是屏幕 的大小，而不是视口(viewport)/浏览器窗口的大小。如果您转到 Dev Tools 并调整它的大小，它会修改查询的屏幕 View ，并使代码认为屏幕是移动尺寸。调整浏览器窗口的大小不会产生这种效果。