I have a website built using Ionic v4. My index.html is updated to allow user scaling
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=12.0, user-scalable=yes" />
Pinch and zoom doesn't work in Chrome on Android.
Link to site here
Suppress the small zoom applied by many smartphones by setting the initial scale and minimum-scale values to 0.86. The result is horizontal scroll is suppressed in any orientation and the user can zoom in if they want to.
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">
Related
My scenario is I have iphone 5S device and safari browser. In this browser I opened a site (this site is included in bootstrap responsive also) with include below meta tag code.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
If I opened the site with zoom in mode. everything is fine.
My problem is if open any other page of the same site it is showing zoom in view, but my requirement is if I open any page it will show normal view not in a zoom view. How can I do?
Shall I add any code in the meta tag? please suggest me
Use this
<meta id="id" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
$(document).ready(function(){
$("#id").attr("content", "width=device-width, initial-scale=1")
})
I was looking to disable zoom on the puffin web browser on an iPad, and I came across this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
This tag disables zooming on safari on the iPad, but not on puffin. Is there something else I need to add to disable zooming on puffin?
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'm working on a web application that is meant to run on mobile safari. When certain functions of the program are active, the page zooms in, forcing the user to pinch zoom out to see the entirety of the content. I'm using the meta tag that is meant to control zooming on my page:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Is there any way to fix this problem?
What you're looking for is user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 ,user-scalable=no">
Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes.
developer.apple.com - Meta Tags
I am having some issues with my viewport on the mobile version of my web site. All of my elements display and are re-sized correctly within the page, however the page extends much farther then the end of the content.
Is there a way to restrict the height of my view port? Or could this possibly be a different issue I am just not seeing?
After further testing this error only occurs on Android mobile devices. Are there any know issues with Android viewports?
Remove height=device-height, from
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
this is i found in your code
if you height=device-height, will fit the site vertical on the screen
may be you required the
<meta name="viewport" content="width=device-width">
only