I'm working on developing a mobile site and for whatever reason the page seems to load as if it is zoomed in every single time. I can scale it easily on a touch phone and it looks just about right, but I was wondering if anyone had any ideas of how to prevent this from happening.
I have tested this issue on Android and iPhone and it seems to be happening on both.
This didn't seem to help all except that I was unable to scale after the page loaded
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1">
You can try to use that :
That block pinch to zoom
<meta name="viewport" content="width=device-width, user-scalable=no" />
I would recommend the following meta, as it sets the page load zoom, rather than blocking the zoom function.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-Edit-
I didn't actually notice you already had initial-scale=1 in your meta. Try with '1.0' instead, I'm not sure if it will make a difference.
Related
I am making a react application. When I open the application in chrome browser, it gets zoomed in. I have to zoom out chrome to 75% to see the actual applicatio. In 100% my application looks all zoomed. Why is this happening and how can I solve it?
Check your head section for metatag declaration. Mostly there should be the problem with user-scalable value. It should be 1.0 for perfect result.
Here is the full code for correct meta tag
<!-- For 100% page rendering -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- OR
* To lock the zoom of the page -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
If its not working well for you, please share your website link to review further.
I'm having trouble with a mobile page that uses a site of ours in an iframe.
It works fine on desktop but on mobile the page doesn't resize correctly. Based on internal testing it seems that the page is missing this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Is there any way to set that via jQuery and have it actually take effect?
In theory I believe that using this SO article I could inject the meta tag like this:
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">');
But it seems the problem really comes down to forcing it to re-parse the html. Is there a way I could do that?
Yes you can append a meta tag, but no you can't force reparsing of the html. The browser is going to ignore any changes you make.
So created this nice app. Some testers go test. Some are older folks, don't have good eye sight. Want bigger font. So we make Settings Page: fonts for everyone.
Good, not problem. Everything text in css font-size has em. But is cordova app. So HTML is loaded quite a number of times. There goes Javascript DOM stuff.
Still not problem. We have view-port.
Are there other ways to do this? Quite a number of HTML parts are deleted and others are put back in, so to add a class to an element does not work.
This is how I solved it: It is not a changing of the font-size, it is an abibity for the user to zoom, or, actually: user-scalable=yes
Old:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Into:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=yes">
my site: http://www.healthot.com doesn't show correctly in iPhone and other mobiles. It's scales the window, so it's necessary to zoom out for see the page. Check this photo and you are going to understand all: http://www.dropbox.com/s/27o9ubygfl4ci3w/Foto%2016-04-14%2018%2058%2005.png
What can i do?
Update your view port meta tag from:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
To:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Learn more on how viewport works.
I'm using this metatag on my site:
<meta name="viewport" content="width=device-width, initial-scale=.5">
That scale makes things work just perfectly on iPhones (which I know is unorthodox... not using 1), but when the user agent is an iPad what I'd like to do is serve this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Just wondering if any of you guys have clever ideas for how I might do so? Thanks so much!