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

Question

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

我有一个最小宽度为 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>

问题是，当您在移动设备上打开文件时，它不适合纵向模式下的屏幕。您需要双击以适合它。

有什么可以做的，以便在纵向模式下打开适合屏幕吗？

谢谢大家。

Answer 1

视口中有最大比例和初始比例。将视口更改为 ： <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

啊，得到了你。对，下面是两个链接...第二个工作保持红色 - 我认为这就是你的追求（下面的第二个链接示例的代码，您将需要两个@medias）！无论如何，现在都可以在我的手机上工作！

http://www.bootply.com/render/115758

http://www.bootply.com/render/115760

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