I am testing my site https://www.industrialstores.com/ in google page speed but user experience under mobile tab, it is showing to correct this "The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience."
I set my viewport in header as
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I tried different viewports defined in different stackoverflow question but not able to find my solution yet.
<meta name="viewport" content="width=device-width, initial-scale=1">
Check out: https://css-tricks.com/snippets/html/responsive-meta-tag/
I have a responsive web, but I want to allow the user to zoom out on this screen:
http://regalauncuento.es/comprar-cuento-infantil?aid=186
Please, open this link in your mobile device, you can check that zoom in works fine, but the zoom out is disabled...
I use this meta viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
I try this too, but zoom out continues fail:
<meta name="viewport" content="user-scalable=1, initial-scale=1.0"/>
What is happening here?, thanks you.
I was going through the source code of a website and found this piece of code.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">
I want to know what this initial scale, user-scalable, minimum-scale, maximum-scale are and what does those values mean? And also tell me what all values they accepts.
They are viewport meta tags, and is most applicable on mobile browsers.
width=device-width
This means, we are telling to the browser “my website adapts to your device width”.
initial-scale
This defines the scale of the website, This parameter sets the initial zoom level, which means 1 CSS pixel is equal to 1 viewport pixel. This parameter help when you're changing orientation, or preventing default zooming. Without this parameter, responsive site won't work.
maximum-scale
Maximum-scale defines the maximum zoom. When you access the website, top priority is maximum-scale=1, and it won’t allow the user to zoom.
minimum-scale
Minimum-scale defines the minimum zoom. This works the same as above, but it defines the minimum scale. This is useful, when maximum-scale is large, and you want to set minimum-scale.
user-scalable
User-scalable assigned to 1.0 means the website is allowing the user to zoom in or zoom out.
But if you assign it to user-scalable=no, it means the website is not allowing the user to zoom in or zoom out.
user-scalable:
user-scalable=yes (default) to allow the user to zoom in or out on the web page;
user-scalable=no to prevent the user from zooming in or out.
You can get more detailed information by reading the following articles.
http://www.html-5.com/metatags/meta-viewport.html
https://css-tricks.com/snippets/html/responsive-meta-tag/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes
Demo Code (recommended)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
</head>
<body>
<header>
</header>
<main>
<section>
<h1>do not using <mark>user-scalable=no</mark></h1>
</section>
</main>
<footer>
</footer>
</body>
</html>
viewport meta tag on mobile browser,
The initial-scale property controls the zoom level when the page is first loaded.
The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
This meta tag is used by all responsive web pages, that is those that are designed to layout well across device types - phone, tablet, and desktop. The attributes do what they say. However, as MDN's Using the viewport meta tag to control layout on mobile browsers indicates,
On high dpi screens, pages with initial-scale=1 will effectively be
zoomed by browsers.
I've found that the following ensures that the page displays with zero zoom by default.
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
It's for controlling aspect on mobile phones and tablets. You will find more info here : https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
This post may help. https://css-tricks.com/snippets/html/responsive-meta-tag/ It gives a full description on the meta tags and its different attributes.
If you are worried about Google Pagespeed (Lighthouse) error under the Accessibility tab. You can solve the error by replacing this code in the header.php file under the theme files.
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">
should be replaced with
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
You will see that the error will be solved after refreshing the Pagespeed page. If you are still seeking the error after replacing the code, just clear the cache from optimization plugins or the Hosting side.
I am trying to enable pinch zoom on my website. I've tried to enable zooming by setting meta viewport like this but without any success.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2.0, minimum-scale=1, user-scalable=yes"/>
Any ideas why my site is still not zoomable on ipads and iphones?
This may be a bit late seeing that it has been answered almost a year ago... Although I tried your meta tags on my HTML page of my IOS app.
The tags didnt really let me zoom out, and barely let me zoom in, and when I would zoom, it would revert back to its original size.
Now I was able to zoom out all the way, and zoom in a "a lot" and it would hold the zooms with these meta tags:
<meta name="viewport" content="width=device-width, initial-scale=.5, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes"/>
I am not able to zoom my responsive site in IPhone and IPAD.But at the same time I am not having any problem with Android mobiles. It is perfectly zooming in and zooming out.
I am having the meta tag like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
Pretty much says it all on its own:
user-scalable=0
The Safari Web Content Guide tells us to use this when we want "to set the initial scale and to turn off user scaling." This is what prevents you from zooming in and out.
I think you should remove the last 3 atrributes,
, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0
entirely.
That should allow Mobile Safari users to scale if they want to.
You need to also set "minimum-scale=1.0" to whatever you want your users to be able to zoom to (as well as setting the "user-scalable" to 1), for example: 2.0 would 100% zoom.