Mobile Firefox完全忽略了Viewport

时间:2013-04-20 17:01:31

标签: android firefox mobile scale viewport

我迷路了,无法弄清楚如何说服Mobile-Firefox加载我的网站完全缩小:/我找不到搜索stackoverflow和网络的工作解决方案。这是

的链接

WEBSITE

我的网站没有单独的移动版本。我允许放大和缩小,在iPhone,iPad和股票Android-Browser上它完美无缺。但是在我的Android上使用Mobile-Firefox它会加载页面缩放它......而这一点不是主要问题!

页面的“可点击”区域保持与初始缩放相同的小“框”:我无法滑动我的滑块,我甚至无法点击那个小“活动框”之外的图片来打开fancybox-links等。一旦我将我的网站平移到那个小“盒子”中,我就可以滑动,点击链接并按照我应该的方式进行交互。

我的元代码如下:

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

我使用html5boilerplate作为我网站的起点,您是否看到任何与我的视口问题有关的冲突?另一个用户似乎找到了一个解决方案,摆脱了另一个指向旧版浏览器的元标记。我在代码中找到以下内容,但是否删除它并不重要:

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

我还尝试使用以下代码片段,但无济于事:

    <style>
    -moz-@viewport {
            width: device-width;
            initial-scale: 1;
    }   
    </style>

也许有人知道一个简单的解决方案吗?我会非常感谢任何有关如何解决问题的帮助,建议或提示:)非常感谢您提前!

干杯,梅林。

3 个答案:

答案 0 :(得分:3)

将视口width设置为您希望移动的宽度:

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

width=device-width强制浏览器在 Android 上拥有 360px ,在 iPhone 320px

答案 1 :(得分:0)

显然,如果您单独设置宽度标签并且不设置其他标签,则可以正常工作。

答案 2 :(得分:0)

我有很多工作,在我检查了其他使用firefox移动设备的网站之后,我找到了解决方案。解决方案是增加元标记视口:

这在这里工作得很好。

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