9

我迷路了，不知道如何说服 Mobile-Firefox 加载我的网站完全缩小：/我找不到搜索 stackoverflow 和 web 的有效解决方案。这是一个链接

网站！

我的网站没有单独的移动版本。我允许在 iPhone、iPad 和现有的 Android 浏览器上放大和缩小，它可以完美运行。但是在我的 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>

也许有人知道一个简单的解决方案？对于如何解决问题的任何帮助、建议或提示，我将不胜感激:) 非常感谢您！

干杯，梅林。

4

3 回答 3

3

将视口设置width为移动设备所需的宽度：

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

width=device-width强制浏览器在Android上使用360px，在iPhone上使用320px。

于 2013-04-21T09:01:06.843 回答
0

显然，如果您单独设置宽度标签而不设置其他标签，它就可以工作。

于 2013-10-25T20:26:53.543 回答
0

我做了很多工作，在我检查了其他在 firefox mobile 上工作的网站后，我找到了解决方案。解决方案是增加元标记视口：

这在这里工作得很好。

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

于 2017-12-27T16:04:00.813 回答