Html 移动视口无法打开适合屏幕的页面

目前困扰我的问题。到目前为止还没有找到答案

我有一个最小宽度为480px的站点，用于屏幕小于640px的设备

<meta name="viewport" content=" initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

<style>
body {margin:0; padding:0;}
@media screen and (max-width: 640px) {
    .div {width:100%; min-width:480px; background:#ff0000; color:#ffffff;}
}
</style>

问题是，当你在手机上打开一个文件时，它不适合纵向模式下的屏幕。您需要双击以适应它

有什么可以做的，以便打开适合屏幕上的肖像模式

---

谢谢大家。

视口中有最大比例和初始比例。将您的视口更改为：

Ahhh找到您了。对，下面是两个链接。。。第二个可以保持红色-我想这就是你在下面第二个链接示例中的代码，你需要两个@media！不管怎样，我的手机现在可以用了

---

是否要强制用户进行定向？否，无论设备定向如何，都要打开适合屏幕的网站。网站的最小宽度是480px。可能需要通过js来实现。你需要像width=Maxdevice width，480Oh这样的东西，当屏幕太小时，你想放大页面吗？@bjb568我想缩小，因为内容页面比屏幕宽。或当设备宽度小于640px时，无论方向如何，视口都将变为480px。nope不会自动使页面适合屏幕。nope也不起作用。因为你忘了最小宽度。它必须是480px。为了检查您的示例，只需插入一个图像，您将看到红色框的宽度不是480px。

            @media (min-width:480px) and (max-width: 640px){
                    .div {
                    width: 100%;
                    background: #ff0000;
                    color: #ffffff;
                    }
            }

            @media (max-width: 640px){
                    .div {
                    background: #ff0000;
                    color: #ffffff;
                    }
            }