Mobile Firefox ignores Viewport completely

Question

I'm lost and can't figure out how to convince Mobile-Firefox to load my site fully zoomed out :/ I couldn't find a working solution searching both stackoverflow and the web. Here's a link to the

WEBSITE!

There is no separate mobile-version of my website. I allow zooming in and out and on iPhones, iPads and the stock Android-Browser it works flawlessly. But using Mobile-Firefox on my Android it loads the page zoomed it... and that alone isn't the main problem!

The "clickable" area of the page remains the same small "box" of the initial-zoom: I can't slide my sliders, I can't even click on pictures outside of that small "activity box" to open fancybox-links and the like. As soon as I pan my site into that little "box" I can slide, click links and interact as I should be able to.

My meta-code is the following:

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

I used html5boilerplate as a starting point for my website, do you see any conflict that could pose with my view-port problem? Another user seemed to find a solution, getting rid of another meta-tag pointing to older browsers. I find the following in my code but it doesn't matter whether I erase it or not:

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

I also tried to work with the following code snippet, to no avail:

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

Maybe someone knows a simple solution to this? I would be so grateful for any kind of help, advice or hint on how to tackle the problem :) Thank you very much in advance!

Cheers, Merlin.

Answer 1

I had a lot of work and the solution came after I inspected other sites that worked on firefox mobile. The solution was to increase the meta tag viewport:

This worked perfectly here.

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

Answer 2

Set the viewport width to the width you want it to be for mobile:

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

width=device-width forces the browser to have a 360px on Android, and 320px on iPhone.

Answer 3

Apparently if you set the width tag alone and set no other tags, it works.