放大并适合手机中的网站

Posted 2023-02-25

【中文标题】放大并适合手机中的网站

【英文标题】：Zoom in and fit website in phones

【发布时间】：2014-03-03 19:38:39

【问题描述】：

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

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

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

但这没有用。如果我从我的 iphone 手动缩小，它就完美了。

我已将容器的宽度设置为 1230 像素。我无法将其设置为 100%。有没有办法做到这一点？

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

【问题讨论】：

如果您的客户希望它只针对桌面进行优化，那么只需删除媒体查询。或者如果这不起作用，只需设置 initial=scale=2 或其他东西。

那并没有解决问题

您的要求能再具体一点吗？从移动设备查看时，您希望网站在加载时放大到最大吗？

如果我不清楚，我很抱歉。当网站在手机上加载时，现在它有滚动条。我想放大直到滚动条消失。基本上直到它适合屏幕。

如果您已经有滚动条，那么我认为您想缩小直到滚动条不再存在。确保您在代码中的任何位置使用overflow: auto; 而不是overflow: scroll;。但是，如果您的原始帖子中没有更多代码供我们检查，则很难隔离问题。

【参考方案1】：

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

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

【参考方案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);