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.
Related
Is there any decent procedure to compile html, css, and js files into one js file? I've been looking on methods how to load css and html files to js, and they all require requireJS. Is there any webpack plugin, or just a module for this?
I know this is not a decent question, but I've been thinking on not always fetching an external source file (html, css).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blah blah blah</title>
<script src="something.js"></script>
<script>
// 'load' will load everthing to #something
something.load(
// options
)
</script>
</head>
<body>
<div id="something"></div>
</body>
</html>
Finally, thanks to this article, all I need is html-loader. Then I can just add import html from 'some.html'.
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.
When I push update js files or code to server , I have to clean the cache each time to see the changes on my web site.
I am using this meta tags on my master page
<meta http-equiv="x-ua-compatible" content="IE=8">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='-1'>
<meta http-equiv='pragma' content='no-cache'>
but still having same issue.
Is there any way to resolve this issue ?
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">