1

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

我有一个应该与移动设备兼容的网站（它是一个 facebook 应用程序）。整个设计基于固定宽度（Facebook 应用程序为 810 像素，移动页面我将其缩减为 520 像素）。减小宽度是我所能做的，使页面具有响应性需要我重写整个 html 和 css 以及一些 javascript，我们同意简单地适应页面就足够了。

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

我尝试使用视口元标记：

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

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

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

这是我用于测试的 HTML 代码。它只是一个以渐变为背景的 520x2000 像素框。

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

1 回答 1

1

根据OP的要求。

将您的元标记修改为此

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

于 2013-10-13T15:14:46.490 回答