HTML/CSS 没有正确调整我的页面大小
HTML/CSS not resizing my page correctly
我的网站在这里：http://easenhall.org.uk/index.html
如果您要减小浏览器的宽度 window 它会从桌面视图更改为平板视图，然后如果您继续操作，它将更改为移动视图。
它适用于桌面浏览器，但如果您通过手机查看网站，它将始终以平板电脑模式显示网页。我想不通为什么。
如果您检查桌面网页并按下切换设备工具栏按钮并尝试将页面大小调整为移动视图，您会得到类似的效果，它停留在平板电脑视图中。
我检查了控制台，那里没有显示任何错误，我找不到任何问题。任何帮助将不胜感激。
尝试将此添加到您的 <header>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
你必须在标题标签之后使用这个元标签，否则响应式不起作用
<title>This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
作为背景，当 Apple 推出 iPhone 前段时间时，他们预料到当时没有人为小屏幕编写页面的问题。这包括相对较新的媒体查询，当时还没有得到广泛支持。
他们决定缩放整个屏幕，从大屏幕到小屏幕。阅读起来并不容易，但至少你可以看到所有东西在哪里，而且你可以随时放大到有趣的部分。
缩放是通过创建 viewport 实现的，这是一个离屏虚拟屏幕，宽度设置为 960px。页面将在那里呈现，并缩放到较小的物理屏幕。
这也意味着 CSS 媒体查询将获得 960 像素的报告宽度，因此不会触发替代样式。
Apple 还引入了一个名为 viewport 的非标准 meta 属性，它使开发人员可以对视口的属性进行一些控制。
viewport 属性 最常见的用法是将视口大小设置为与物理屏幕相同。然后 viewort 会报告更正确的屏幕尺寸，CSS 媒体查询可以完成剩下的工作。实际上，viewport 通常用于取消缩放效果。
桌面浏览器从一开始就没有这个问题，所以视口实际上只是浏览器 window。这就是桌面始终按预期进行测试的原因，因为所见即所得。
这就是 vuejs（可能还有其他框架）正在做的事情 "under the hood":
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
在 header 中准确设置此标记将导致您想要的结果。
我的网站在这里：http://easenhall.org.uk/index.html
如果您要减小浏览器的宽度 window 它会从桌面视图更改为平板视图，然后如果您继续操作，它将更改为移动视图。
它适用于桌面浏览器，但如果您通过手机查看网站，它将始终以平板电脑模式显示网页。我想不通为什么。
如果您检查桌面网页并按下切换设备工具栏按钮并尝试将页面大小调整为移动视图，您会得到类似的效果，它停留在平板电脑视图中。
我检查了控制台，那里没有显示任何错误，我找不到任何问题。任何帮助将不胜感激。
尝试将此添加到您的 <header>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
你必须在标题标签之后使用这个元标签，否则响应式不起作用
<title>This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
作为背景，当 Apple 推出 iPhone 前段时间时，他们预料到当时没有人为小屏幕编写页面的问题。这包括相对较新的媒体查询，当时还没有得到广泛支持。
他们决定缩放整个屏幕，从大屏幕到小屏幕。阅读起来并不容易，但至少你可以看到所有东西在哪里，而且你可以随时放大到有趣的部分。
缩放是通过创建 viewport 实现的，这是一个离屏虚拟屏幕，宽度设置为 960px。页面将在那里呈现，并缩放到较小的物理屏幕。
这也意味着 CSS 媒体查询将获得 960 像素的报告宽度，因此不会触发替代样式。
Apple 还引入了一个名为 viewport 的非标准 meta 属性，它使开发人员可以对视口的属性进行一些控制。
viewport 属性 最常见的用法是将视口大小设置为与物理屏幕相同。然后 viewort 会报告更正确的屏幕尺寸，CSS 媒体查询可以完成剩下的工作。实际上，viewport 通常用于取消缩放效果。
桌面浏览器从一开始就没有这个问题，所以视口实际上只是浏览器 window。这就是桌面始终按预期进行测试的原因，因为所见即所得。
这就是 vuejs（可能还有其他框架）正在做的事情 "under the hood":
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
在 header 中准确设置此标记将导致您想要的结果。