Menu
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/
818
What does “The initial scale in the viewport meta tag is not working” mean? This means that the URL in question does not contain the initial scale in the HTML document. Or, this element is on the page, but you set it to a value other than 1.0.
Throw the viewport meta tag into your <head> , plus the @viewport rule into your CSS when you're building flexible layouts and you're good to go.
So yes, the meta viewport tag should be used on all websites and is mandatory if you want a good user experience. You may also need to use media queries to change CSS for different screen widths, like collapsing a menubar into a hamburger menu. The meta viewport tag won't do this for you, but you should.
What does “No viewport meta tag on the page” mean? This means that the page in question does not contain a viewporttag. Consequently, users who have entered your site from a smartphone will see a page not adapted for their devices. In this case, the text will be unreadable.
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" />
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
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
