meta name="viewport" doesn't work as expected

Question

I have that meta tag in my website www.ssd-vergleichen.de

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

To prevent the device from initial zooming into the website. When watching the website on my chrome mobile browser on Samsung Galaxy S2, the website is beeing zoomed in about 400%. What did I do wrong? Can anyone help?

Thanks in advance

Edit: With using

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

it works in Android's standard webbrowser, but still not in Chrome. I wonder if it works in IOS?

Edit2: No, it also doesn't work with iOS http://iphonetester.com/

enter image description here

Checkout the browser tests at http://www.quirksmode.org/mobile/metaviewport/ There are details of which devices correctly implement each part of the meta tag. — Stuart Young, Feb 27 '14 at 22:46

score 5 · Answer 1 · answered Jun 21 '13 at 13:51

5

Try this :

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />

answered Jun 21 '13 at 13:51

Romain Braun

3,624
4
23
46

Colin Bacon · Answer 2 · 2013-06-21T13:47:21.563

4

Have you tried

<meta name="viewport" width="device-width">

As I understand it width="device-width" constrains the width of the layout to the device width. Surely setting intial-scale=1 is then telling the browser to zoom 100% (i.e. not scaled)?

Update

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

Is intended to be used to scale responsive sites correctly. Considering your site is fixed to a width of 1100px, setting initial-scale=1 will not result in the whole page being visible.

From the W3C Use Meta Viewport Element To Identify Desired Screen Size

edited Jun 21 '13 at 13:47

answered Jun 21 '13 at 13:03

Colin Bacon

15,436
7
52
72

this doesn't work too. And `initial-scale=1` means that the website is not zoomed at all. What you mean is 200% or `initial-scale=2` I think – Stefano L Jun 21 '13 at 13:14
Sorry by zoom 100% I mean showing the web page at it's intended size. i.e. no scaling, which it appears to be doing. – Colin Bacon Jun 21 '13 at 13:41

score 0 · Answer 3 · answered Jun 21 '13 at 12:00

0

Try:

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

with no ;

answered Jun 21 '13 at 12:00

Ian Devlin

18,534
6
55
73

it seems to work for the Android standard browser, but not for Chrome (watch my edit) – Stefano L Jun 21 '13 at 12:05
I use the above code on my site and it works no problem in Chrome, so something might be interfering with it. I'll check your site... – Ian Devlin Jun 21 '13 at 12:15
I've already cleared my chrome cache. Still having that issue.. It seems like it's not working on iPhone, too: http://iphonetester.com/ – Stefano L Jun 21 '13 at 12:20
Does this help at all: http://stackoverflow.com/questions/11345896/full-webpage-and-disabled-zoom-viewport-meta-tag-for-all-mobile-browsers/12270403#12270403 – Ian Devlin Jun 21 '13 at 12:38

score 0 · Answer 4 · answered Jan 07 '14 at 16:23

I had the same problem today and I was able to fix it by toying with the target-densitydpi attribute and setting it to high while setting the width to device-width

Like so:

<meta name="viewport" content="initial-scale=0.8, zoom=10%, width=device-width, target-densitydpi=high-dpi">

This solved my problem.

score 0 · Answer 5 · edited Jun 06 '18 at 19:10

0

Try this:

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

In CSS put this:

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

edited Jun 06 '18 at 19:10

answered Jun 06 '18 at 16:52

abdulelah

27
4

score -3 · Answer 6 · answered Jan 21 '14 at 14:25

-3

You should write

<meta id="viewport" name="viewport" content="[your_content_params]" />

I tried this and it worked.

answered Jan 21 '14 at 14:25

braun3812

1

meta name="viewport" doesn't work as expected

6 Answers6

Linked