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.
Related
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">
Please forgive any breaches of protocol and correct me if need be: long-time reader, first-time poster here. I could not find any solutions online that worked or were terribly recent and I was wondering if anyone else had encountered this.
I've been enabling full screen on a web page with meta tags and adding a shortcut to the home screen. I recently upgraded to iOS 8.0.2 on an iPad Air and have noticed that the status bar information (iPad, Wifi, Clock, battery, lock) are now on top of the top edge of the website window instead of over an unusable black status bar. As well, there seems to be white dead space now at the bottom of the page, probably displacing the now non-existent status bar.
Does anyone know how I can either revert back to having the status bar or use the bottom part of the page using javascript?
Many thanks for any help you can provide. I've attached some screen shots and some brief code below.
Cheers,
Kurt
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta id="extViewportMeta" name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<title>Full Screen</title>
<style>
body {
background: #0000FF;
font-size: 140pt;
}
</style>
<body>
A<br />B<br />C<br />D<br />E<br />F<br />G<br />H
</body>
</html>
Images here:
http://postimg.org/gallery/2cm224s78/
Had the same problem and found this little gem of a fix...just put it in the head of your document ::
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
iOS 8 status bar overlay + footer 'bar' in HomeScreen web applications
I have a site called Healthot. It's a responsive site, with the meta viewport tags and the media queries. The problem is that the site only adapts when I resize Chrome's window of my Mac. When i enter the site in a mobile phone, like iPhone 5, it's doesn't scale.
The site is http://www.healthot.com
You have to add a meta tag in the head, which I don't seem to find on your site.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Hm... I dont see
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
in firebug.
Try to add all year meta tags in top of the head. Sometimes it is can be important
From where is this coming?
<script async="" type="text/javascript" src="http://whos.amung.us/pingjs/?k=xd69ovuycv2g&t=Healthot%20%7C%20Fitness%20control.%20Better%20bodies.&c=s&y=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F23115237%2Fmy-site-doesnt-detect-viewport&a=0&r=7773"></script>
And add
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
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.
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!