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">
Related
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.
I am developing a webapp using angularjs and jquery. The webapp loads perfectly fine when the mobile device language is set to any except Chinese. I debugged a lot and found the issue that the web app is not loading because of the meta view port tag in the index.html. As soon as I remove the meta viewport tag, the web app loads successfully in the mobile when the language is set to Chinese.
navigator.language = "zh-CN"
But I cannot remove the meta viewport tag from the index.html , just for the webapp to load when the language is set to Chinese.
May I know the reason why the meta viewport tag is creating this problem when navigator.language is set to Chinese ?
Is there any other alternate solution to make my webapp working with the meta viewport tag ?
Below is the code that I have in index.html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=360.1, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="msapplication-tap-highlight" content="no"/>
<meta name="format-detection" content="telephone=no">
<title>Test</title>
The above will not work if mobile language is set to zh-CN. But works fine if I remove the viewport tag.
Please help on this. Appreciate all your inputs.
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!
I'd like to remove the Safari navigation bar when users visit my website from an iPhone.
I've tried
window.scrollTo(0, 1)
and am also using
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0;">
in the header.
The problem is that the body tag of my website is set to overflow=hidden so the scroll command does nothing.
Does anyone know a solution?
The following code seems to work as a preliminary fix in portrait orientation.
<meta name="viewport" content="width=320; height=416; initial-scale=1.0; maximum-scale=1.0;">