Question

我创建了一个带有更多“困难”或有问题的CSS功能的模板，例如具有溢出滚动的固定位置，全宽导航栏和另一个列状位置：固定元素也带溢出滚动。我的所有字体大小都在em中设置。

该网站在大型桌面屏幕上看起来很理想，但不是更小，即大多数笔记本电脑。但是如果你在较小的屏幕上缩小浏览器（命令/控制 - 减去）它再次看起来很理想，实际上相当于一个更大的屏幕。首次在较小屏幕上加载网站时出现的问题实际上与在较大屏幕上过度缩放（可能为250％）相同。

大多数问题似乎都与宽度有关：固定位置导航栏的文本链接无法按比例缩小，所以我有overflow-x：auto。此外，还有一个居中的列，其中包含可视地与背景图像区分的所有内容，并且其内容因过度放大而从过度缩放中断开。

如何在浏览器缩放级别为100％的情况下正确缩放页面？

我觉得答案是一个基本的CSS概念，我错过了自我教学中的理解，所以如果看起来很明显就道歉。

谢谢。

Answer 1

这可能会有所帮助。把它放在你的文件的头部。

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

编辑：

虽然这可能不会直接解决您的问题。在您使整个网站响应之前，可能需要短暂的修复才能使您的网站可用。

它告诉浏览器启动什么缩放级别和其他东西。您应该尝试最适合您设计的内容。

Answer 2

首先，我体验了您正在做的事情（像position:fixed div这样的事情），因此很难为div或p s自定义它。< / p>

因此，您需要考虑一个解决方案，使元素在屏幕上隐藏得太小。

E.g。检测移动浏览器并隐藏它等等。

如果您使用php，这可能会更方便，因为您肯定可以找到一个模板来检测移动设备。

检查一下，看看它是否适合你：Detect Mobile Browsers

Answer 3

我遇到过类似的事情。对我来说，这是因为我的网站通过http：//加载谷歌字体。这在本地系统上工作正常，但是网络服务器通过https进行托管，这意味着出于安全原因，浏览器阻止了http：// google字体链接。这导致网站看起来略小或更大。

解决方案：更改为https：//以获取Google字体和其他相关网址。