如何让网站适应不同尺寸的手机屏幕？

Question

我创建了一个网站，需要在所有屏幕上以完全相同的方式查看。 我设计了宽度= 320和自动高度。

<meta name="viewport" content="width=320">

现在无论屏幕的大小如何，网站都能很好地适应屏幕。对我来说重要的是网站SCALES而不是RESIZES所以我不能在这种情况下使用这段代码：

<meta name="viewport" content="width=device-width">

虽然它在各种手机模拟器和一些不同的智能手机上运行良好，但它无法在 iPhone 6 上扩展。它只显示整个网站的左上角，右下角有黑条。

如何强制iPhone 6缩放页面，以便将320px缩放到与iPhone的屏幕宽度相匹配？

Answer 1

使用视口可能不是您案例的最佳选择。 我认为如果你使用css @media可能会更好，因为你需要宽度= 100％

例如

@media screen and (max-width: 320px) {
div {
    width: 100%;
    padding: 5px 10px;
}}

所以无论用户使用iphone 6还是iphone 4，屏幕都将是完美的。