As you can see, the site is shrinked to the side in some mobile devices:
I'm not sure why. There's not width set in the body or the html tag:
body {
color: #444;
font-family: 'Helvetica Neue LT Std', sans-serif;
font-size: 16px;
}
html {
margin-top: 32px !important;
}
This is the viewport tag:
<meta name="viewport" content="width=device-width">
I don't see any thing strange there either. What could be the problem?
Live site: http://www.m2comm-semi.com/electronic-shelf-labels/
It could be a problem with your initial level of zoom. I recommend changing your meta line to -
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0"
>
This will force the browser to set your initial level of zoom to normal, i.e. 1x.
Please see What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag? for more information.
Unfortunately, depending on how else you have coded your file, this may not be much help. Alot of people have difficulty getting their page to display properly on an actual mobile device (as opposed to an emulated one). I am one of them. If I ever figure out a way around this problem, then I will post here accordingly (if no one else has already done so).
