Question

首先，我知道我在这里尝试的是不好的做法，但我真的没有多少选择，所以请不要回答“让页面响应”等等。

我有一个网站（它是一个Facebook应用程序），我应该与移动设备兼容。整个设计基于固定宽度（Facebook应用程序为810px，移动页面减少到520px）。减少宽度是我所能做的，使页面响应将要求我重写整个html和CSS以及一些javascript，我们同意简单地拟合页面就足够了。

现在我希望这个520px页面始终适合视口宽度（纵向和横向），以便在智能手机上运行跨浏览器和跨操作系统。

我尝试使用viewport元标记：

<meta name="viewport" content="width=device-width, user-scalable=true;">

但这几乎不适用于任何浏览器，因为每个浏览器似乎都有不同的行为。我找到了适用于单个浏览器的解决方案（或多或少），但在某些浏览器上，这似乎是不可能的。

有没有办法使用CSS和/或JavaScript实现这一目标？

这是我用于测试的HTML代码。它只是一个520x2000px的盒子，背景为渐变。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, user-scalable=true;"> 
        <meta charset="utf-8">
        <style type="text/css">
            body,html {
                margin:0;
                padding:0;
            }

            /* white->blue->black gradient */
            .gradient {
                background: -moz-linear-gradient(left,  #ffffff 0%, #0078b5 50%, #000000 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(50%,#0078b5), color-stop(100%,#000000)); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(left,  #ffffff 0%,#0078b5 50%,#000000 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(left,  #ffffff 0%,#0078b5 50%,#000000 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(left,  #ffffff 0%,#0078b5 50%,#000000 100%); /* IE10+ */
                background: linear-gradient(to right,  #ffffff 0%,#0078b5 50%,#000000 100%); /* W3C */
            }               
        </style>
    </head>
    <body>
        <div class="gradient" style="border:3px solid orange;width:520px;height:2000px;">

        </div>
    </body>
</html>

Answer 1

根据OP的要求。

将元标记修改为此

<meta name="viewport" content="width=526, user-scalable=1">

将非响应式页面宽度设置为设备宽度，跨浏览器

1 个答案: