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

Posted 2023-03-15

【中文标题】如何让网站适应不同尺寸的手机屏幕？

【英文标题】：How to make website adapt to different size of phone screens?

【发布时间】：2016-03-05 18:02:06

【问题描述】：

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

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

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

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

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

如何强制 iPhone 6 缩放页面，以便缩放 320 像素以匹配 iPhone 的屏幕宽度？

【参考方案1】：

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

例如

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

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