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.
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">
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 have an HTML page where I instigate an JS application in a Jquery dialog. How can I load the meta properties:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, user-scalable=0">
dynamically to be only applied for the JS file.
After some research this just might be what I'm looking for:
http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
Meta tags are only applied in the document ( in the <head> element ), not individual files.
If you need that meta for a dialog, I guess the only solution available would be to load an <iFrame> that includes the meta tags in its <head> element.
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!