1

我正在做一个项目，我们希望为客户部署一个响应式移动版本的网站——在这种情况下，现有的“桌面”网站有两个断点：

>= 980px
>= 1200px

在屏幕小于 980 像素的设备上，“小型桌面”站点只是缩放以适应浏览器，因此用户能够点击缩放等并有效地浏览整个桌面站点。

我们现在想为小屏幕（<480px）实现一个网站版本，但是我遇到的问题是，通过更改元视口标签以适应小屏幕上 1:1 布局的断点，我失去了屏幕尺寸介于 481 像素和 979 像素之间的用户能够使用桌面站点的缩放版本。

以前我使用的是元标记：

<meta name="viewport" content="width=980">

但据我了解，要让小屏幕设备正确缩放布局，我需要调整它以读取：

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

我真正需要的当然是两者的混合！- 有任何想法吗？

4

1 回答 1

4

与http://blakelondon.co.uk有类似的挑战- 在比移动设备更大的设备上进行本地扩展，而不是在移动设备上响应。

你的问题与我的相反，但我认为同样的方法会奏效。

该解决方案使用 JavaScript 将元视口重写为固定宽度以强制原生设备缩放。警告 - 它带有在其中一种上下文中布局重排的非常小的缺点。

首先将元视口设置为正常：

<meta name=“viewport” content=“width=device-width” />

然后，添加一些 JavaScript 以将此值重写为固定宽度，以强制在较小的设备上进行原生缩放（选择 screen.width 以适应）：

if (screen.width <= 640) {
  viewport = document.querySelector(“meta[name=viewport]”);
  viewport.setAttribute(‘content’, ‘width=980’);
}

希望有帮助！

PS 我的同事@cole007 也提出了这个问题，代码略有不同： http ://cole007.net/blog/136/responsiveish-viewport-hack

于 2013-07-17T08:59:17.797 回答