I always get the wrong measurements of my webapp. It is 320x460 even though I'd expect it to be 320x548.
I'm using following metatags:
<meta name="viewport" content="initial-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
So I'm not sure what I'm doing wrong.
This may help you -
standard viewport tag to set the viewport to the device's width
Android 2.3 devices need this so 100% width works properly and
doesn't allow children to blow up the viewport width
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
width=device-width causes the iPhone 5 to letterbox the app, so
we want to exclude it for iPhone 5 to allow full screen apps
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" />
Related
when opening a website in iPhone Mobile Safari The full screen does not appear.
I tried this, but the problem still exists.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
What do you mean by full screen? Do you mean like you want it to be mobile friendly? or...
Have you actually tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0">? instead of all those over things that you added in.
I'm web developer.
I developed my mobile website use 'viewport' option in html for responsive mobile website.
Then, I assigned meta data like this below:-
<meta name="viewport" content="width=320"/>
But my web site occurs right margin(below pic is part of my web site menubar)
How can delete right margin? .... Thanks for your help!
enter image description here
....
Write this and try if it works...
<meta name="viewport" content="width=device-width, initial-scale=1">
You can need to change your media query to this and this would difinilty work for your in website. Please vode if i m correct.
<meta name="viewport" content="width=device-width, initial-scale=1">
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
EDIT:
By giving static width, you are already loosing the responsiveness. Instead use device-width which would automatically take the device's width.
max-scale=1.0 and user-scalable=no wouldn't allow the user to pinch zoom on the mobile. If you want to let the user zoom in on the website, you can remove these two
I have a habit of looking at the code of many of the websites I visit and have seen the viewport defined in many different ways.
I have seen this
<meta name="viewport" content="width=device-width, initial-scale=1 " />
and this
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui" />
and this
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
and this
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 " />
I thought about combining all of them into something like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
But is there any benefit in that?
What is the best way?
width=device-width
this means we are telling to the browser “my website adapts to your device width”
Initial-scale
This define scale the website, This parameter sets the initial zoom level, which means if 1 CSS pixel is equal to 1 view port pixel. This parameter help to when you changing orientation mode, or preventing a default zooming. without this parameter responsive site work.
Maximum-scale
Maximum-scale define maximum zoom. When you access website top priority is maximum-scale=1 won’t allow the user to zoom.
Minimum-scale
Minimum-scale define minimum zoom. this work same as above but define minimum scale. If you not define this its work without using this is useful when maximum scale is large and you want to set minimum scale that time you can use.
User-scalable
User-scalable assign 1.0 means website allow to zoom in or zoom out.
But if you assign User-scalable=no its means website not allow to zoom in or zoom out.
Hope this help you!
Above is Sky Dreams answer on the following question: What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?
Please review the following links:
Maximum-scale=1.0: http://a11yproject.com/posts/never-use-maximum-scale/
User-scalable=no: To "user-scalable=no" or not to "user-scalable=no"
Minimal-ui: http://www.therightcode.net/use-minimal-ui-in-viewport-meta-tag/
When I remove initial and maximum-scale out from the meta tag:
<meta name="viewport" content="width=device-width, user-scalable=no" />
tag, iOS 6 Safari is diplaying the site too large. I have to take the initial and maximum out for it too fit correctly. Is it acceptable to leave the viewport tag like this? I haven't tested on other mobile devices.
I use the following for ensure proper sizing on all mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In some cases, I will adjust the initial-scale down a minor amount to ensure the proper scale:
<meta name="viewport" content="width=device-width, initial-scale=.96"> // Scale as needed
I am working on application in Phonegap (essentially mobile browser wrapped around HTML5 page), that need their initial width to be equal viewport width when started, but allow user for rescale. So far I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes" />
(...)
<img src="foo.jpg" style="width:100%" />
Didn't work, on Android 2.2 and 2.3 - it scaled img while user scaled viewport via gesture
And:
<meta name="viewport" content="width=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, user-scalable=yes" />
(...)
<img src="foo.jpg" style="width:480px" />
This also didn't work on Android - it produced img of about 4/3 of viewport size on start (so user was able to scroll right).
I am probably missing something obvious, but searching Google so far didn't gave results I want
EDIT: It seems to be bug in PhoneGap, second code is working outside PhoneGap
It was a bug in Phonegap (2012). It is long fixed since then :)