【问题标题】:Responsive site scaled to 200% on mobile响应式网站在移动设备上扩展至 200%
【发布时间】:2013-03-20 12:30:06
【问题描述】:

编辑:

在许多设备上进行了进一步测试,并包括一个图形标尺来测量屏幕,似乎整个网站都被缩放到 200%。我尝试将 maximum-scale=1 添加到视口元标记,但这只会阻止缩放,而不是已经应该为 1 的初始比例。还尝试将初始比例减小到 1 以下,但没有区别。 注意:缩放已关闭 iphone 常规设置。


在我们新的响应式站点上,我们有一个 300 像素 X 75 像素的谷歌双击横幅。我正在测试的 iphone4 屏幕(chrome、sarafri)的分辨率为 640x960,但横幅明显宽于 300 像素。刚刚检查了一个联系(chrome),它也比它应该的大。在桌面上,它以正确的大小显示,所以我认为没有任何媒体查询会放大它。

我已包含元标记: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

任何关于为什么它比它应该更大的想法将不胜感激!

【问题讨论】:

    标签: android iphone mobile responsive-design


    【解决方案1】:

    iPhone 4 显示屏的像素数是第一代 iPhone 的四倍。为了防止移动网站看起来很小,它会将它们放大 200%。

    您将横幅导出为什么文件类型? iPhone 通常不喜欢位图图像,有时甚至不喜欢 HTML5 画布。

    您是否尝试过设置最大缩放比例并阻止用户缩放?您的描述表明已设置了最大比例,但您提供的代码却显示了最小值?

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    

    【讨论】:

    • 谢谢 Billy :) 横幅是通过 google 双击提供的 gif。只有最小宽度的代码是最初的帖子,我们尝试了最大比例并阻止用户缩放,但它仍然显示为相同的 200%。感谢您澄清它发生的原因,至少我知道这不是我们网站的错误 - 我们将不得不解决它。干杯
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-01-22
    • 2015-07-15
    • 2018-07-15
    • 1970-01-01
    • 2013-10-09
    • 2020-06-24
    相关资源
    最近更新 更多