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

How to make mobile page fit on the screen once open?

提问by spirytus

I need to put together website for mobile devices, so iPhones and various androids. The problem is I struggle with getting viewport right and other settings. My goal is so webpage would be coded for specific width e.g. 640px wide. Then once open device would zoom it in/out to the width of the screen so everything became larger or smaller same like after zoomig in/out via pinching on the device screen.

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

So I would like to develop it for lets say 640px width and depending on device it would scale up or down once open. So if device screen would be 960px wide it would automatically scale to this width via viewport somehow. Is this possible at all to have it coded for predefined width in css and have zoomed in/out as needed by device itself?

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

I apologize if the question is too generic, will explain details if needed.

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

EDIT: So the most common approach if I understand correctly is to provide few layout versions for most commons screen sizes? Using media queries in css provide different values for widths, fonts sizes etc is that right?

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

If I decide however to go with percentages rather than media queries, given the design provided I think still would have a problem with resizing fonts as layout has images with text in it and text needs to be proportional to the image. Also percentages would take care of widths, height might be an issue though as the images would have to be resized vertically too. Some parts of the design would need to "fit" each other it seems and it would become problem I think.

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

Now if I simply build a website of certain width, lets say 640px I should be able to position everything on the screen with pixels, no diffeent from normal non-mobile website.

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

So I tried to set <meta name="viewport" content="width=640">and inside of a page set width of widest container in css to 640px making page width 640px basically. If I understand correctly it will set up viewport to exact width of the page. So the page would be build as any other non-mobile webpage. User will have to adjust scale by pinching as when the page opens it is usually zoomed in/out for some reason. Is my understanding of what is happening here correct or is there some problem with it. Having it predefined size takes care of different mobile screen sizes as viewport is always same, fits into page width and only scale seems the problem, that is unless I'm missing something here.

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

I also should have mentioned that I need to do only portrait and make it only option, so no landscape view (that will be another question).

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

Would love to know your thoughts and I appreciate all the answers so far.

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

采纳答案by Shailender Arora

This is called Responsive Web Design when a website adjusts according to screen size...

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

You can make this kind of responsive website easily through CSS3 Media Queries:

您可以通过 CSS3 Media Queries 轻松制作这种响应式网站：

How to write CSS Media Queries for common types of devices

如何为常见类型的设备编写 CSS 媒体查询

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

响应式网页设计：它是什么以及如何使用它

If you google for Responsive Web Design you will find lots more information on this topic. It's really an amazing method to make your website look great on all devices from small to large screens.

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

回答by ArnelC

We have a series of tutorials on creating web pages using responsive web design. If you want a quick introduction to it checkout Introduction: Creating a Responsive Web Design, it lists common mobile phone and tablet sizes, so it might lead you to the answer you need. You can find the link to our tutorial series in the article. The solutions provided use Bootstrap in order to provide easy to create pages. And it also provides free samples of responsive web design pages.

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

I hope this helps to provide the answer that you need, if not, then please let us know if we can provide any further assistance.

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

Regards,

问候，

Arnel C. InMotion Hosting Community Support Team

Arnel C. InMotion 托管社区支持团队

回答by Chetan Gawai

Specify the width in percentage say width=100%,which automatically adjusts the width with the screen.

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