我创建了一个模板，其中包含一些更“困难”或有问题的 CSS 功能，例如具有溢出滚动功能的固定位置、全宽导航栏，以及另一个具有溢出功能的类似列的 position:fixed 元素滚动。我所有的字体大小都是以 em 为单位设置的。
该网站在桌面大屏幕上看起来很理想，但在较小的屏幕上，即大多数笔记本电脑上，效果并不理想。但是如果你在较小的屏幕上缩小浏览器(command/control-minus)，它看起来又很理想，实际上相当于一个更大的屏幕。在较小的屏幕上首次加载网站时的问题实际上与在较大的屏幕上过度缩放(可能 250%)相同。
大部分问题似乎都与宽度有关:固定位置导航栏的文本链接无法按比例缩小，所以我有 overflow-x: auto。此外，还有一个居中的列，其中包含所有内容以在视觉上与背景图像区分开来，并且其内容因过度缩放而中断，因为它们变得太宽了。
如何使我的页面在浏览器缩放级别 100% 时正确缩放？
我觉得答案是一个基本的 CSS 概念，我在自学时没有理解它，如果它看起来很明显，我深表歉意。
谢谢。
最佳答案
这可能会有一些帮助。将其放在文档的开头。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
编辑:
虽然这可能不会直接解决您的问题。在您使整个网站响应之前，这可能是使您的网站可用的短期修复。
它告诉浏览器从什么缩放级别开始以及其他内容。您应该试验最适合您的设计的方法。
关于html - 只有在缩小时，网页在较小的屏幕上看起来才完美，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23166725/