如何让手机页面在屏幕上打开?

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和各种机器人建立网站。问题是我很难正确地获取viewport和其他设置。我的目标是将网页编码成特定的宽度，比如640px宽。然后，一旦打开设备，就会把它放大到屏幕的宽度，这样所有的东西就会变得更大，或者更小，就像zoomig在设备屏幕上的缩放一样。

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根据设备的不同，它会随着打开而增大或减小。如果设备屏幕的宽度是960px它会自动通过viewport扩展到这个宽度。是否有可能在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.

因此，我尝试设置 ，在css中最大容器的页面设置宽度为640px，页面宽度为640px。如果我理解正确，它将设置viewport以精确的页面宽度。因此，该页面将被构建为任何其他非移动网页。用户将不得不通过捏来调整比例，因为当页面打开时，由于某些原因通常会放大/缩小。我对这里发生的事情的理解是正确的还是有问题的。使用它的预定义大小可以考虑不同的移动屏幕大小，因为viewport始终是相同的，适合页面宽度，而且只有比例似乎是问题所在，除非我在这里漏掉了什么。

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.

我很想知道你的想法，我很感激所有的答案。

3 个解决方案

#1

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媒体查询，您可以轻松制作这类响应性强的网站:

How to write CSS Media Queries for common types of devices

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

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

响应性Web设计:它是什么以及如何使用它

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.

如果您使用谷歌进行响应性Web设计，您将会找到关于此主题的更多信息。这真的是一种让你的网站从小到大屏幕上看起来很棒的方法。

#2

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.

我们有一系列关于使用响应式web设计创建web页面的教程。如果你想快速介绍一下it检查介绍:创建一个响应性的Web设计，它列出了常见的移动电话和平板电脑大小，因此它可能会引导你找到你需要的答案。您可以在本文中找到我们教程系列的链接。提供的解决方案使用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托管社区支持团队。

#3

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

指定宽度的百分比，例如宽度=100%，这将自动调整宽度与屏幕。