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")
})
Related
I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it's not responsive to the mobile view.
What could be the wrong?
You are probably missing the viewport meta tag in the html head:
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it the device assumes and sets the viewport to full size.
More info here.
I have also faced this problem. Finally I got a solution.
Use this bellow code. Hope: problem will be solve.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Though it is answered above and it is right to use
<meta name="viewport" content="width=device-width, initial-scale=1">
but if you are using React and webpack then don't forget to close the element tag
<meta name="viewport" content="width=device-width, initial-scale=1" />
Responsive meta tag
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I am trying to disable user pinch zoom on a web page dedicated for mobile devices, i tried the following meta tags with no avail:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
I also tired this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
some of my older websites that used to succeed in disabling user pinch zooming before, no longer work anymore as of today.
I am not sure if there's any new standards for achieving the same effect, but i dont seem to find any newer solution on the internet that would work with iOS 13.3.
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">
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.