I am having a problem finding the right viewport meta tag to use for a responsive site while restricting user scaling.
Currently I am using:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
I am getting some really weird issues on my iPad2. Upon orientation change, the layout for the previous orientation, including elements that should be hidden by media queries, is taken and posted over-top of the correct layout.
I appreciate any help.
Thanks,
just this and nothing else, remove the rest
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
Related
When change orientation of iOS device the contents of Webview don't always adjust to new orientation. It cuts off to what seems to be width of the space that it occupied in previous orientation. Screenshot below
On orientation change I call orientationchange event
evalJavascript("var e= document.createEvent('Events');" +
"e.initEvent('orientationchange',true, false); document.dispatchEvent(e)");
In HTML I have viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />
What's interesting is that this does not happen to other pages like New York Times home page, which I load locally. Any ideas what could be the issue?
Put this HTML code into your website header:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device- width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This should ensure that your website is app/mobile accessible.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Due to the fact that user-scalable=no means we do not let the user zoom in or out of the page. Then why do we need to use initial-scale=1.0 and maximum-scale=1.0? Is it necessary to use them?
Your intuition is correct, maximum-scale=1.0 is unneeded since the page can't be zoomed anyway. Setting minimum-scale=1.0, maximum-scale=1.0 is a common pattern that's almost equivalent to user-scalable=no. Almost because some browsers will load the page at a scale such that all content width is visible (e.g. Chrome on Android does this) so the user may start off at a scale that's not 1.0 and can't zoom. However, adding initial-scale=1.0 forces the zoom to 1.0.
I need to set the viewport at 490px, non-scalable
<meta name="viewport" content="width=490, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
With the iphone in portrait mode, pages are loading slightly zoomed. A double-tap zooms them back out to the appropriate 490px. Why is this happening?
You should use something like this:
<meta name="viewport" content="width=490, target-densitydpi=device-dpi, user-scalable=1">
I have a responsive webpage that changes as the screen resolution changes, but for some reason, it loads the non-responsive version whenever I load the page on my iPhone:
http://rayku.com/register
The home page is fully responsive on the iPhone (http://rayku.com/home), but I'm not sure why the registration page isn't. Do you have any ideas?
I don't have an iPhone, so I can't test this, but it looks like you're missing a meta tag from your <head> tag. Try adding this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this works.
You're missing the viewport meta tag (which is correctly present on the home page).
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a site that is 2048px wide. Is there a way to automatically have the iPad fit the entire site width on the screen when the site is loaded? I've tried experimenting with meta viewport in a few different ways:
<meta name="viewport" content="width=device-width maximum-scale=1.0">
<meta name="viewport" content="width=device-width initial-scale=1.0">
This hasn't worked though. The site is still too wide and spills off screen on the iPad.
You can pass a fixed size to the content width like so:
<meta name="viewport" content="width=2048" />
May need some tweaking to allow for padding either side, but should load the site at that size and allow users to zoom in.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
That's what I use for my website.
The correct way to fix this problem are by using percentages rather than fixed widths. But if you "cannot" change that, you can force your viewport to scale down by using 0.x in initial-scale like:
<meta name="viewport" content="width=device-width, initial-scale=0.625, user-scalable=yes" />
Try setting min-width: 2048px; to the html and body tags in css. That's fixed some weirdness on iPads for me before, but not sure if it will apply to this one.
I was working on a site with the same problem recently, it wouldn't stay zoomed out between page clicks for a fixed 960px width site. Try:
<meta name="viewport" content="width=device-width, initial-scale=-100%" />
So far so good, passed on my Ipad Air.
This works fine:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">