html - 打开后如何使移动页面适合屏幕？

Question

我需要为移动设备建立网站，比如 iPhone 和各种安卓设备。问题是我很难获得正确的视口(viewport)和其他设置。我的目标是让网页针对特定宽度进行编码，例如640 像素宽。然后，一旦打开设备，它就会放大/缩小到屏幕的宽度，因此一切都变得更大或更小，就像通过在设备屏幕上捏合来放大/缩小一样。

所以我想将它开发为 640px 宽度，并根据设备打开后它会放大或缩小。因此，如果设备屏幕的宽度为 960px，它将以某种方式通过视口(viewport)自动缩放到该宽度。是否有可能在 css 中针对预定义宽度进行编码，并根据设备本身的需要进行放大/缩小？

如果问题太笼统，我深表歉意，如果需要，我会解释细节。

编辑:因此，如果我理解正确的话，最常见的方法是为最常见的屏幕尺寸提供几个布局版本？在 css 中使用媒体查询为宽度、字体大小等提供不同的值，对吗？

但是，如果我决定使用百分比而不是媒体查询，考虑到所提供的设计，我认为在调整字体大小方面仍然存在问题，因为布局中包含包含文本的图像，并且文本需要与图像成比例。百分比也会处理宽度，高度可能是一个问题，因为图像也必须垂直调整大小。设计的某些部分似乎需要彼此“适应”，我认为这会成为问题。

现在，如果我简单地构建一个特定宽度的网站，比如说 640px，我应该能够用像素在屏幕上定位所有内容，这与普通的非移动网站没有区别。

所以我尝试设置<meta name="viewport" content="width=640">并在页面内部将 css 中最宽容器的宽度设置为 640px，使页面宽度基本上为 640px。如果我理解正确，它会将视口(viewport)设置为页面的精确宽度。因此，该页面将像任何其他非移动网页一样构建。用户将不得不通过捏合来调整比例，因为当页面打开时，它通常会出于某种原因放大/缩小。我对这里发生的事情的理解是正确的还是存在一些问题。预定义尺寸可以处理不同的移动屏幕尺寸，因为视口(viewport)总是相同的，适合页面宽度并且只有比例似乎是问题所在，除非我在这里遗漏了一些东西。

我还应该提到我只需要做纵向并使其成为唯一选项，所以没有横向 View (那将是另一个问题)。

很想知道你的想法，我很感激到目前为止的所有答案。

Answer 1

当网站根据屏幕尺寸进行调整时，这称为响应式网页设计...

您可以通过 CSS3 媒体查询轻松制作这种响应式网站:

How to write CSS Media Queries for common types of devices

Responsive Web Design: What It is and How to Use It

如果您在谷歌上搜索“响应式网页设计”，您会发现有关此主题的更多信息。这真是一种让您的网站在从小屏幕到大屏幕的所有设备上看起来都很棒的绝妙方法。