Search code examples
htmlcssresponsive-designmobile-website

Firefox mobile scales viewport inspite of meta veiwport tag

I'm using this meta tag to set the viewport size on mobile browsers: 

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

and this css to make sure that largeish images don't cause scrolling on smaller view ports:

img { max-width: 95%; }

The width of the content is not forced at any point. (The CSS uses max-width in most cases)

It works perfectly on chrome on android, but on firefox mobile, it changes the viewport size to fit the image in.

This makes pages with and without images look inconsistant - the site looks scalled down, and text is a little too small.

What can I do about this?

This is the website.

Update

As J. Prakash had said, the problem was that the total width of my page wasn't 100% of the viewport.

Since I wanted a 1em padding on my content, and use max-width to allow reflowing, I added this within my media query:

body, #content { width: 100%; }
#content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}
Solution

  • your viewport seems to be correct. your CSS isn't. to have the expected behavior you need to adjust your site-width to a maximum of 100% not a fixed pixel-width.

    That results in a full code review and partly rebuild of your sites css (and html).

    "

    Check this link https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag