Viewport meta-tag on S3 not working

Question

I have a response website and with the meta-tag I want the mobile phones to set the viewport to 320 width. I've inserted the following metatag:

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Somehow, this viewport does works on iphone, but not on Galaxy S3. I've tested Android phones with smaller screens, they worked also. The Galaxy G3 has a Portrait Width of 360px according to http://viewportsizes.com/ It seems that the S3 doesn't change the viewport.

I've also tested it width content="width=device-width" and content="target-densitydpi=device-dpi". All without luck.

I've searched on the net for solutions, but couldn't find the right solution.

Any help would be appreciated! :)

enter image description here

Bram Bram · Accepted Answer · 2014-03-21T16:36:01

I got it working by changing the meta viewport-tag to:

<meta name="viewport" id="vp" content="width=device-width, user-scalable=no" />

Then I used this script:

<script>
// Set vieport to set valid width on certain Android devices
var vp = document.getElementById('vp');
if ($(window).width() <= 480) {
    vp.setAttribute('content','width=320, user-scalable=no, target-densitydpi=low-dpi');
}
else {
    vp.setAttribute('content','width=768, user-scalable=no');
};
</script>

target-densitydpi=low-dpi is doing the trick! This will only be added if the screen width is smaller than 480px, else the tablet version would show the mobile version.

Viewport meta-tag on S3 not working

1 Answers