How prevent zoom in mobile using javascript? - javascript

To prevent zoom in html you can use <meta name="viewport" content="user-scalable=0"/> in the header.
How about implement prevent zoom with javascript?

The same way.
Native:
var tag = document.createElement('meta');
tag.name="viewport";
tag.content = "user-scalable=0";
document.head.appendChild(tag);
jQuery:
$('<meta name="viewport" content="user-scalable=0"/>').appendTo('head');

Related

How to set scale in WKWebview?

I´m trying to modify the scale of a page load in a WKWebView. It is working as far as I´m looking in the html. But the actual scale in the WKWebview doesn´t change.
Here´s how I inject the script:
let script =
"var viewport = document.querySelector(\"meta[name=viewport]\");" +
"viewport.setAttribute('content', 'width=device-width, initial-scale=0.4, user-scalable=0');" +
let userScript = WKUserScript(source: script,
injectionTime: WKUserScriptInjectionTime.atDocumentEnd,
forMainFrameOnly: true)
userContentController.addUserScript(userScript)
Print the html:
webView.evaluateJavaScript("document.getElementsByTagName('html')[0].innerHTML", completionHandler: { (innerHTML, error) in
print(innerHTML)
})
HTML result in console:
Optional(<!--<![endif]--><head>
<title>Bitcoin (BTC) $2391.84 (1.85%) | CoinMarketCap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.4, user-scalable=0">
<meta name="google-site-verification" content="EDc1reqlQ-zAgeRrrgAxRXNK-Zs9JgpE9a0wdaoSO9A">
<meta property="og:type" content="website">
I´m asking myself if this is the right approach. I also tried: let script = document.body.style.zoom = '0.8'; and let script = document.body.style.webkitTransform = 'scale(0.8)'; which is both working in terms of scale, but using this method, the timeperiod slider in this highchart loses its functionality. Any kind of new ideas would be much appreciated.
Add <meta name="viewport" content="width=device-width, shrink-to-fit=YES"> to your HTML file.
(I added right after but not sure if you can add it anywhere)
In my case I have html files for privacy in my Xcode project. I added that javascript code right below the and it did the trick for me.
It works as if you used scalePageToFit in UIWebView.
Hope it helps.

How to dynamically change meta tag viewport after page load in windows phonegap application?

I want to dynamically change meta tag viewport in "index.html" in windows phonegap app on button click.
I am using
Windows OS 8
phonegap 3.5
Device Nokia Lumia 1320 with windows 8 OS
I want to change below meta tag
<meta id="viewport" name="viewport" content="width=device-width">
to
<meta id="viewport" name="viewport" content="width=720">
I have already tried below URLs but nothing worked for windows phone.
how to set viewport so it is 380x800 or 800x380 depending on orientation?
Setting the Viewport to Scale to Fit Both Width and Height
Here I found link where it says it is not possible to change meta tag dynamically in winodws 8 OS
http://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html
Try to detect the device/OS and change the meta tag accordingly http://www.sitepoint.com/detect-mobile-devices-jquery/
1st write simple function JavaScript for example I have written one function viewport()
<html>
<head>
<script>
function viewport(){
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important;zoom:1!important;}"
)
);
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{height:auto!important}"
)
);
document.getElementsByTagName("head[0].appendChild(msViewportStyle);
}
</script>
</head>
<body>
<button id="btnSubmit" onclick="viewport();">changeviewport</button>
</body>
more..[1]:Can I change the viewport meta tag in mobile safari on the fly?

Google plus badge not showing

I create a Badge on Google plus developers : https://developers.google.com/+/web/badge/
but when I copy and past the code into my HTML file the badge not showing. Here is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google + Badge</title>
</head>
<body>
<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-href="https://plus.google.com/109600806421917664383" data-rel="publisher"></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
What I'm doing wrong !? Thanks
adeneo's JSFiddle wasn't working for me either (Chrome 35, OSX). First I had to whitelist it in the Disconnect extension. Then I was getting the console error
Uncaught ReferenceError iframes is not defined
which, according to http://www.jesse-smith.net/fixed-google-plus-1-button-working/ and Google PlusOne Button has errors on Chrome, is caused by having 3rd-party cookies blocked.
If you're using Chrome as well (and the problem is caused for you by blocking 3rd-party cookies as well), there should be a cookie icon on the right-hand side of your URL bar. Click it, click "Show cookies and other site data...", change to the "Blocked" tab and allow all the 3rd-party cookies from *.google.com domains.
You can also go Settings > Show advanced settings > Privacy, click the “Content Settings” button and enable 3rd-party cookies everywhere.
Unfortunately I wasn't able to find a way to get your G+ button to work in browsers with 3rd-party cookies disabled.

How to add meta tag in JavaScript

I want to add <meta http-equiv="X-UA-Compatible" content="IE=edge"> for a particular page.
But my pages are rendered inside one HTML tag. Only the content is changing on clicking different templates. So i cannot add the <meta> in <HEAD> section.
Is there any way to add the <meta http-equiv="X-UA-Compatible" content="IE=edge"> using javascript ?
You can add it:
var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.getElementsByTagName('head')[0].appendChild(meta);
...but I wouldn't be surprised if by the time that ran, the browser had already made its decisions about how to render the page.
The real answer here has to be to output the correct tag from the server in the first place. (Sadly, you can't just not have the tag if you need to support IE. :-| )
$('head').append('<meta http-equiv="X-UA-Compatible" content="IE=Edge" />');
or
var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.getElementsByTagName('head')[0].appendChild(meta);
Though I'm not certain it will have an affect as it will be generated after the page is loaded
If you want to add meta data tags for page description, use the
SETTINGS of your DNN page to add Description and Keywords. Beyond
that, the best way to go when modifying the HEAD is to dynamically
inject your code into the HEAD via a third party module.
Found at http://www.dotnetnuke.com/Resources/Forums/forumid/7/threadid/298385/scope/posts.aspx
This may allow other meta tags, if you're lucky
Additional HEAD tags can be placed into Page Settings > Advanced
Settings > Page Header Tags.
Found at http://www.dotnetnuke.com/Resources/Forums/forumid/-1/postid/223250/scope/posts.aspx
Like this ?
<script>
var meta = document.createElement('meta');
meta.setAttribute('http-equiv', 'X-UA-Compatible');
meta.setAttribute('content', 'IE=Edge');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>
As specified by #marcellothearcane, for modern browser, you can also use:
var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.head.appendChild(meta);
Supported browser here: document.head
Try
document.head.innerHTML += '<meta http-equiv="X-UA-..." content="IE=edge">'

How to hide the safari address bar on mobile devices [duplicate]

How do I hide the address bar on iPhone?
I tried two different methods so far:
The scroll down one pixel trick with JavaScript on page load
And the following meta tags:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="apple-mobile-web-app-capable" content="yes" />
Also this:
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
I am completely confused.
PS: Oh, I forgot a really important thing: the web page itself does not overflow the browser window. It probably is the reason why the 1 pixel scrolldown trick does not work.
I can't make it bigger, since the hit thing about the design, that everyone can scroll, but this page folds... :)
I just hit this myself. If the address bar is not hiding, the reason may simply be the page is not long enough to scroll.
When the
window.scrollTo(0,1)
is called the page MUST be longer than the window so a scrolling event can occur.
Only when the scrolling even occurs will mobile safari hide the address bar.
🔴 UPDATE: Apple removed support for minimal-ui in iOS 8 so this is no longer a useful answer :(
For new googlers looking into this: As of iOS 7.1 there's a new minimal-ui mode that works on mobile Safari:
It's enabled by setting the minimal-ui property on the viewport:
<meta name="viewport" content="minimal-ui">
You can also use it in conjunction with other properties like so:
<meta name="viewport" content="width=device-width, minimal-ui">
Of note, there's no minimum content length requirement as there is with the scrollTo hack. There's a great overview of this new mode here. (That's where the above image comes from.) He also lists some shortcomings.
The only official documentation I could find on this is a note in Apple's iOS 7.1 release notes:
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
For example, use <meta name="viewport" content="width=1024, minimal-ui”>.
Of course, since this only works in iOS 7.1 and above, it's usefulness may be limited.
Unless something has changed in recent iOS versions, the scroll down trick is the only one that reliably works, I've had no issues with this version:
/mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function() {
window.scrollTo(0, 1);
}, 1000);​
I didn't care about any other mobile platform for this particular page though, it was redirecting based on agent...you may want to change the regex to check for iPhone specifically, e.g. replace /mobile/ with /iPhone/.
I think this version is actually better. It tests to see if the user has already begun scrolling, which is an issue I noticed in my mobile project.
/Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function () {
if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);
You can run the function when the site content is ready instead of using timeout
addEventListener("load", function() {
window.scrollTo(1, 0);
}, false);
Try:
setTimeout(function () {
window.scrollTo(0, 1);
}, 1000);
If using jQuery, put it at the end of $(document).ready();. The time-out allows for the browser to determine the height of the page...
In case none of these solutions work and you are running into the very narrow issue that I faced, here's what fixed it for me.
I had this in my CSS
html{position: relative; height: 100%; overflow: hidden;}
This css applies a fix to one of my pages only, so I restricted it with a condition to that page, and the address bar is now behaving correctly on all other pages.
I have been searching around on this full screen web app as well and i found this.
http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/
Basically you need add the following in your header:
<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />
//App name
<meta name="apple-mobile-web-app-title" content="App name" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
//APP ICONS
<link rel="apple-touch-icon" href="/img/icon.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/icon.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/icon.png">
Open the site in Safari
Tap on the "Open with" icon ( arrow pointing upwards and box below it) beside refresh button at the URL bar
Select "Add to home screen"
Go to the homescreen and open the "App name"
Voila! website with no URL bar or navigation buttons!
<meta name="apple-mobile-web-app-capable" content="yes" />
iPhone Configuring Web Applications
I think it will never be solved unless the content is more than the browser window.
Here is some code that will hide the URL on load, on orientation change, and on a touchstart (the touchstart should only be used if you have a persistent hidden URL, which is a whole other can of worms - if you don't, remove that part of the script).
if( !window.location.hash && window.addEventListener ){
window.addEventListener("load", function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
window.addEventListener( "orientationchange",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
window.addEventListener( "touchstart",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
}
<meta charset="utf-8"><meta name="description" content="{MF_PLUGIN_SETTING:HOME_DESCRIPTION}"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes">
This is used for adding a ios web app to the homescreen without the searchbar.

Categories