Question

我有一个固定宽度的网站（980px），我们被要求删除较小设备上的右侧边栏。（例如，屏幕尺寸小于768px的设备。）

这意味着，实际上，我们在同一个代码库中运行两个固定宽度的站点。

我们在网站中使用以下元标记：

<meta name="viewport" content="width=device-width,initial-scale=1">

问题在于，在较大的平板电脑上，我们会看到完整的网站（我们应该这样），但放大了。（因为平板电脑正在考虑全宽度 - 比如 - 768px并相应地进行缩放。）

我无法将宽度设置为固定大小：

<meta name="viewport" content="width=980,initial-scale=1">

...因为较小的设备会缩小太远。

是否有任何解决方法可以正确修复所有设备的缩放级别？

（n.b。我知道这里的基本想法是错误的。）

Answer 1

好的，所以我设法让它运行起来。

首先设置width = device-width以确保加载正确的“响应”版本。为metatag提供一个ID，以便我们以后可以轻松获取它。

<meta id="viewport" name="viewport" content="width=device-width"/>

然后，我们要检查屏幕尺寸，以便我们可以强制宽度和缩放到正确的尺寸：

(function($){
    $(function(){
        if (window.matchMedia !== undefined) {
            var mq = window.matchMedia("(max-width: 767px)");
            if (mq.matches) {
                $('#viewport').attr('content', 'width=767');
            }else{
                $('#viewport').attr('content', 'width=980');
            }
        }
    });
})(jQuery);

我注意到以任何方式设置初始比例都会破坏缩放。

请注意，我在这里使用window.matchMedia，虽然不完全支持，但对我的目的来说很好。如果您需要支持更高比例的用户，可以考虑改用Modernizr.mq。

Viewport元标记与半响应网站

1 个答案: