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

【问题标题】：mobile viewport does not open page fit to screen移动视口无法打开适合屏幕的页面
【发布时间】：2014-02-21 23:02:01
【问题描述】：

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

我为屏幕小于 640 像素的设备申请了一个最小宽度为 480 像素的网站；

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

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

有什么办法可以在纵向模式下打开适合屏幕？

谢谢大家。

【问题讨论】：

你想强制用户进入一个方向吗？
不，无论设备方向如何，都希望打开适合屏幕的网站。网站的最小宽度是 480px..
可能需要通过 js 来完成。你需要像 width = Max(device-width, 480)
哦，屏幕太小要缩放页面吗？
@bjb568 我想缩小因为内容页面比屏幕更宽。或当设备宽度小于 640 像素时，视口变为 480 像素，无论方向如何。

标签： html css screen viewport

【解决方案1】：

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

【讨论】：

不，不会自动使页面适应屏幕。

【解决方案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;
                    }
            }

【讨论】：

不，也不起作用。因为你忘记了最小宽度。它必须是 480 像素。检查你的例子，只需插入一个图像，你会看到红色框不是 480px 宽。