Site not responsive in some mobile phones

Question

We have a one-page site, built responsively, and in most phones it appears responsive. However, in some smart phones it's just zoomed out. It seems to be caused by an image in the middle (4 grey boxes with colored dots between them) being much wider than the width of the phone, and we don't understand why.

This is the it's supposed to look (and does look in most mobile browsers):

And this is the way it looks in some mobile browsers (all zoomed out, the image stretching the site):

We of course used the tag

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

What could be causing the difference?

Answer 1

I think you don't need the scale, the scale is for zooming, if you use media screen you can make your site responsible on every mobile, if you need that your site will be supported on every mobile you can use (example):

<!--[if lt IE 9]> <- this is the code for supporting

in this example the code will only give the website extra support by internet explorer 9

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif] -->

things what different brwosers support

those are very nice (example): @media screen and (max-width: 980px) {

tutorial