9

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.

3
  • actually for me, firefox is great and stock browser goes crazy
    – vsync
    Apr 21, 2013 at 8:58
  • which android version do you use, out of interest :)?
    – Merlin
    Apr 24, 2013 at 9:18
  • I'm facing a similar challenge. I'm trying to achieve a min-width for the viewport. I like device-width until it gets down to about 600px, then the viewport really shouldn't scale further down. I feel like I've tried everything, lol. Currently, I'm setting the viewport as you are, and setting a min-width on my html and body. This yields two problems: 1) the same as yours there seems to be a no-click zone to the right of the initially viewable content, and 2) it starts out zoomed in no matter what I set the initial-scale to. Any help would rock! Aug 6, 2013 at 15:26

3 Answers 3

3

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.

2
  • 2
    thanks for your help! When I use your code, I actually get a wider "box" for mobile-firefox, where the user can interact as intended. the problem though is: the initial-zoom doesn't work as it did before anymore. it was fine on android stock browser, also on iPad and iphone 3 & 4, showing the entire site on startup. the only problem was mobile firefox. so it actually cures one problem but creates another - i still have to keep looking for another solution on how to fix the initial-zoom then!
    – Merlin
    Apr 24, 2013 at 9:15
  • 1
    :) I am actually facing it the other way around. Firefox for mobile renders perfectly, and all others aren't. but logic says it SHOULD work, if you set the viewport AND the media queries to the same width limit, so why wouldn't your page fits perfectly? I would say all other browsers are buggy..also try to play with minimum-scale and maximum-scale, to fit things. might help.
    – vsync
    Apr 24, 2013 at 9:47
0

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

0

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">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.