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

Question

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

所以我想将其开发为 640 像素宽度，并且取决于设备，一旦打开它就会放大或缩小。因此，如果设备屏幕的宽度为 960 像素，它会以某种方式通过视口自动缩放到该宽度。是否可以将其编码为 css 中的预定义宽度并根据设备本身的需要进行放大/缩小？

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

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

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

现在，如果我只是建立一个特定宽度的网站，比如说 640 像素，我应该能够以像素定位屏幕上的所有内容，这与普通的非移动网站没有什么不同。

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

我还应该提到我只需要做纵向并使其成为唯一选项，所以没有横向视图（这将是另一个问题）。

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

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

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

Answer 2

我们有一系列关于使用响应式网页设计创建网页的教程。如果您想快速了解它，请查看Introduction: Creating a Responsive Web Design，它列出了常见的手机和平板电脑尺寸，因此它可能会引导您找到所需的答案。您可以在文章中找到我们教程系列的链接。提供的解决方案使用 Bootstrap 以提供易于创建的页面。它还提供响应式网页设计页面的免费样本。

我希望这有助于提供您需要的答案，如果没有，请告诉我们是否可以提供任何进一步的帮助。

问候，

阿内尔 C. InMotion 托管社区支持团队

Answer 3

以百分比形式指定宽度，比如width=100%，它会自动随屏幕调整宽度。