移動視口無法打開適合屏幕的頁面

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;
                    }
            }