Zoom not playing well on Android

HTML & CSS
1

Hi,

I’m struggling to find a solution to this. My new site:

It works fine at 100% zoom on all devices… but when I try it on my Android phone (s4), it screws the design up (see image).

I’m a bit baffled, as I’m sure I’ve done everything correct:

body {
  min-height: 500px;
  padding-top: 70px;
  font-family: Tahoma;
  background-color: #f3ebcf;
  background-image: url('./bgs/body-bg-800.jpg');
  background-size: cover;
  min-width: 850px; // set to a min width - so that in theory, it should never (even when zoomed in), go less than this...
}

The header/sidebar are both fixed, with #main_wrapper having a margin-left to the correct width, as to stop the #sidebar overlapping it)

Can anyone see where I’m going wrong?

TIA!

Andy

2

Hi,

I’ve only had a quick look but the first strange thing I notice is the viewport meta tag you are using.


<meta name="viewport" content="scale=1">

As far as I know you should really be using this one if you are supporting mobile with media queries.


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

http://davidbcalhoun.com/2010/viewport-metatag
http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

It seems that mobiles are not seeing your media queries and are just scaling the page to fit the mobile as though it was 980px wide. Mobiles need the viewport meta tag as above in order to action width based media queries because otherwise the mobile describes itself as 980px wide.

If you are not specifically catering for mobile then remove the meta tag completely. I’m wondering whether you are triggering some partial behaviour on some android devices with your version of the viewport meta tag.

In reality you shouldn’t really be serving that same design to mobile as fixed elements are bad in mobile and you should simplify that design on smaller screens.

Notwithstanding the above as seen in a recent thread android can be surprisingly buggy.

3

Hi Paul,

Thanks for the reply :slight_smile: I gave it a go with:

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”/>

…and that seems to have helped a bit. Still getting some weirdness on some occasions, but its much better than it was.

I’m gonna be tweaking it a bit more more still, so we use a smaller logo and buttons to the top, which should help it from dropping over to the next line as well.

Eventually (once the site takes off), I’m gonna code a mobile app for the site, which should get rid of a lot of the issues … but no point spending thousands of $$$'s worth of time on it, until the site has taken off a bit first :slight_smile:

Thanks again!

Andy