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

Question

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

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

现在无论屏幕尺寸多大，网站都可以很好地适应屏幕。这对我来说重要的是，网站规模和不能调整大小，所以我不能在这种情况下，使用此代码：

<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，屏幕将是完美的。