Question

我在解决这个问题上面临一些挑战。我创建了一个响应的主题。所以它适合任何设备的任何分辨率。我的客户希望它没有响应。这意味着它在桌面上显示的方式，它应该在各处显示相同的方式。

一切都很好，除非我在手机上打开网站，它显示滚动条（应该因为它的固定宽度）但我希望它缩小并适合屏幕。我已经看到很多答案说以下面的方式使用视口：

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

但那并没有奏效。如果我从我的iPhone手动缩小，它的工作非常完美。

我已将容器的宽度设置为1230px。我无法将其设置为100％。有没有办法实现这个目标？

演示网站：http://fixar.co.uk/

Answer 1

您可以设置宽度以匹配网站主题的宽度：

<meta id="viewport" name="viewport" content="width=960, initial-scale=1, maximum-scale=1">

Answer 2

我从链接How do you change zoom level dynamically with Javascript?

得到了答案

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

放大并适合手机中的网站

2 个答案: