When I use WordPress Admin Panel in a Mobile browser such as iOS Safari or Android Chrome it allows me to pinch to zoom. When I checked the HTML I see that the below script is in the <head> which in the past has worked for me to prevent the user being able to scale.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Am I missing anything else here?
Thanks
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
It was missing
, user-scalable=0
Related
I've started building a site for a friend, looks great on desktop, and great when I change the browser window size but seems to be zoomed out when I open it on my iPhone?
Any ideas why? Here's the link to the temporary site, if you change browser size to mobile that's how it should look.
http://torwood.footholds.net/~acoustic/
In the header you have:
<meta name = "viewport" content = "width=device-with, initial-scale = 0.1">
which is telling it to start with an initial zoom of 10%
Change it to:
<meta name="viewport" content="width=device-width, initial-scale=1">
Edit:
In fact, for best compatability you should include all the relevant headers:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: http://getbootstrap.com/getting-started/#template
I'm working on a website right now, it's tiniglesias.com ... and everytime I try to use my iphone to check it, it is automatically zooming in.
I've already deactivated all of my plugins to check if any of it is causing this to happen, but it is still zooming in.
I've also tried using the meta tag
<meta name="viewport" content="width=device-width" />
Still not working.
Help would be greatly appreciated.
Try:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Update:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I am using jQuery Mobile in PhoneGap. It is working fine in all browsers, but in mobile the view is very small.
I have used
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
in my html page, but then it is also very small.
just try
content="width=device-width, initial-scale=1"
Try this
enclose the below element in you head part.
<meta name="viewport" content="width=device-width, initial-scale=1">
You can find the below details in the following page.
http://view.jquerymobile.com/1.3.0/docs/widgets/pages/
I am having strange issue. I completed a website and was using screenfly from quirktools to see how it would appear on tablets and smartphones..... it look fine
When I viewed the site on a smart phone or tablet in real, it was showing the site in desktop version ... media queries are not working ... I tried chrome, firefox, opera all on my phone but non of them is showing my site in mobile version.
Friends can you tell me what can possible be wrong ?
I am using simple media queries in my css file
Did you set a meta tag for the viewport? Something like:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Place this meta tag in between
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
You can also Try out this meta tag which will make your media Query work on all size of devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Thanks
I am working on an ipad application.I am using asp.net framework with HTML5 and mobileJquery. Is there anyway to do this?
Thanks
If you are looking to add pinch zoom, you need to have a viewport tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
The old recommended way was:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
More information on this here: http://jquerymobile.com/blog/2011/06/20/jquery-mobile-beta-1-released/
Also, another similar post here: javascript event for a mobile pinch/zoom action
Pinching can be affected by the user-scalable and maximum-scale values of your view port meta tag. Try the below line and let me know it works for you or not.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.6,user-scalable=yes">