如何让我的网站在所有屏幕上看起来都一样？ [关闭]答案

【问题标题】：How to make my website look the same on all screens? [closed]如何让我的网站在所有屏幕上看起来都一样？ [关闭]
【发布时间】：2020-04-28 21:06:12
【问题描述】：

如何使我的网站：informatiestuderen.nl 在小屏幕上（例如在手机上）看起来与在桌面（电脑）等大屏幕上看起来一样？

因为我的网站根本无法在手机上运行。

例如这个网站：carrieretijger.nl 在手机上和在桌面上看起来一样。

我希望能够在小屏幕上放大网站。

【问题讨论】：

我不建议设计带有水平滚动条的网站。这使得它在手机上的导航有点困难。
说真的，您不希望它看起来相同。这将为您的移动用户带来糟糕的体验。相反，您想制作一个显示相同内容的不同版本（或最相关的子集，如果内容太多），使用适用于较小屏幕和触摸输入的设计。谷歌“响应式设计”以获得概念的总体思路。您一定看过很多移动网站吧？将它们与相同站点的桌面版本进行比较。希望你能明白我的意思。该carrieretijger.nl 网站是不如何做到这一点的一个很好的例子！

标签： php html web responsive desktop

【解决方案1】：

这应该是手机的默认行为！

大多数网站需要包含一行代码，例如<meta name="viewport" content="width=device-width, initial-scale=1.0">，以避免发生这种行为。

见Responsive Web Design - The Viewport（w3schools）。

但是，如果您想强制执行相反的行为，您可以选择一个您的网站看起来不错的宽度，并告诉浏览器始终使用该宽度。例如，如果您决定宽度为960px：

<meta name="viewport" content="width=960px">

注意：此标签位于页面的 head 部分。

附加评论：我建议让您的页面具有响应性，例如使用 CSS @media 查询。水平滚动往往很烦人！

这是来自 w3schools 链接的建议：

不要使用大的固定宽度元素 - 例如，如果图像以比视口宽的宽度显示，可能会导致视口水平滚动。请记住调整此内容以适应视口的宽度。

不要让内容依赖于特定的视口宽度才能很好地呈现 - 由于屏幕尺寸和 CSS 像素的宽度在不同设备之间变化很大，因此内容不应依赖于特定的视口宽度才能很好地呈现。

使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置较大的绝对 CSS 宽度会导致元素对于较小设备上的视口来说太宽。相反，请考虑使用相对宽度值，例如 width: 100%。此外，请注意使用较大的绝对定位值。它可能会导致元素落在小型设备上的视口之外。

【讨论】：