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

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>

（最好在整页中查看片段）

当浏览器正常显示代码并且我调整它的大小时，什么也没有发生，但是当我进入开发者工具并使用移动响应版本时，突然缩放工作。

这是什么原因造成的？

标签： htmlcssmedia-queries

Answer 1

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