Question

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

我有一个最小宽度为480像素的网站适用于屏幕小于640像素的设备;

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

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

2 个答案: