For a HTML game I want to disable the normal zooming functionality in Chrome.
This question talks about how to use the viewport meta tag to disable zoom in Chrome on Android but this does not seem to work in normal desktop chrome.
While this doesn't answer my original question (I asked about a page displayed in Chrome) I just wanted to document that Chromium (the OSS behind Chrome) seems to have a flag which controls whether it will support the viewport meta tag:
// Enables the use of the viewport meta tag, which allows
// pages to control aspects of their own layout. This also turns on touch-screen
// pinch gestures.
const char kEnableViewport[] = "enable-viewport";
(soure: http://src.chromium.org/svn/trunk/src/content/public/common/content_switches.cc)
So, if packaging the game into its own chromium instance is an option (which in my case is likely), zooming could be disabled via the viewport meta tag.
Related
I need to disable zoom on mobile website using metatag which is fixed for Android but I am searched more for ios metatag..It is not fixed..
Disabling zoom in websites through the meta tag is not possible anymore.
Safari even mentioned this in it's release notes.
To improve accessibility on websites in Safari, users can now
pinch-to-zoom even when a website sets user-scalable=no in the
viewport.
You could try disabling with javascript though:
document.addEventListener('gesturestart', function(e){ e.preventDefault(); });
https://developer.mozilla.org/en-US/docs/Web/Events/gesturestart
We are using Chrome in kiosk mode and accidentally users are causing the application to zoom with the recent addition of pinch zoom support.
They then think they've broken it and simply walk away leaving the application (and subsequently a 55" touch screen) in a broken state.
Now the only thing to work has been stopping event propagation for touch events over 2 points. Issues with that are we can't do multitouch apps in that case and if you act fast the browser reacts before javascript. Which in our tests still happen on accident by users.
I've done the Meta tags, they do not work. Honestly I wish I could disable chrome zooming at all but I cant find a way to do that.
How can I stop the browser from zooming?
We've had a similar problem, it manifests as the browser zooming but javascript receiving no touch event (or sometimes just a single point before zooming starts).
We've found these possible (but possibly not long-term) solutions:
1. Disable the pinch / swipe features when using kiosk mode
If these command-line settings remain in Chrome, you can do the following:
chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0
--disable-pinch - disables the pinch-to-zoom functionality
--overscroll-history-navigation=0 - disables the swipe-to-navigate functionality
2. Disable pinch zoom using the Chrome flags chrome://flags/#enable-pinch
Navigate to the URL chrome://flags/#enable-pinch in your browser and disable the feature.
The pinch zoom feature is currently experimental but turned on by default which probably means it will be force-enabled in future versions. If you're in kiosk mode (and control the hardware/software) you could probably toggle this setting upon installation and then prevent Chrome updates going forward.
There is already a roadmap ticket for removing this setting at Chromium Issue 304869.
The fact that the browser reacts before javascript can prevent it is definitely a bug and has been logged at the Chromium bug tracker. Hopefully it will be fixed before the feature is permanently enabled or fingers-crossed they'll leave it as a setting.
3. Disable all touches, whitelist for elements and events matching your app
In all tests that we've conducted, adding preventDefault() to the document stops the zooming (and all other swipe/touch events) in Chrome:
document.addEventListener('touchstart', function(event){
event.preventDefault();
}, {passive: false});
If you attach your touch-based functionality higher up in the DOM, it'll activate before it bubbles to the document's preventDefault() call. In Chrome it is also important to include the eventListenerOptions parameter because as of Chrome 51 a document-level event listener is set to {passive: true} by default.
This disables normal browser features like swipe to scroll though, you would probably have to implement those yourself. If it's a full-screen, non-scrollable kiosk app, maybe these features won't be important.
html {
touch-action:none;
}
This will disable browser handling of all panning and zooming gestures. The gesture will still be available for handling by javascript code.
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Just so anyone stumbling across this page is aware the flag in Chrome to disable 'pinch to zoom' is now:
Google Chrome/Chromium/Canary version above 50:
chrome://flags/#touch-events
Google Chrome/Chromium/Canary version less then 50 or old versions:
chrome://flags/#enable-pinch.
I'm dealing with the same issue. I think I can handle it reasonably well with the following approach
determine the css pixel width of the html element: document.documentElement.clientWidth
compare this measurement to the known pixel width of the kiosk screen
if the html element is wider, in css pixels than the screen is, in physical pixels, that means it's scaled
if the html element is scaled, apply a zoom to the body element to compensate. The formula is `body.style.zoom = htmlElementClientWidth / screenPhysicalPixelWidth
This techique has the beneficial side effect of automatically scaling the UI to whatever size the current window is, which is helpful for development if I'm developing on a screen smaller than the target screen.
More on screen pixels vs css pixels, and a discussion of how the html element expands to fill the available space at quirksmode.org.
Another solution that currently works in Chrome (54) is to add an event listener for the 'touchstart' event and call preventDefault() based on the length of the targetTouches or touches on the event.
This solution prevents a pinch (any two fingered gesture for that matter), but still provides flexibility with how you want to respond to the event. It's a nice solution because it doesn't require you to disable touch events altogether (as required if you want to disable pinch using the chrome flags, since chrome://flags/#enable-pinch no longer exists).
window.addEventListener('touchstart', function(e) {
if (e.targetTouches.length === 2) {
e.preventDefault();
}
}, false);
Some text that you can't pinch zoom on Chrome (tested in 54)
As of Version 51.0.2704.84 m, chrome://flags/#touch-events disables all the touch-events not only the pinch function. FYI. Hopefully, Google will return this functionality in future release.
The following quote is from O'Reilly Definitive Guide to CSS:
Mozilla and related browsers use CSS to affect the presentation of the browser chrome itself
What is actually meant by the word "chrome" in this context? Is it simply the display area?
the chrome is the UI of the actual browser not just the content shown in the page, the themeable bits, like the buttons, menus, tabs, etc
browser chrome
‘Browser chrome is a euphemism for the graphical framework and elements of the web browser window.
‘Browser chrome’ is not to be confused with Google Chrome – which is a web browser.
Chrome includes the web browser:
title bar,
toolbar buttons: ‘Back’, ‘Forward’, ‘Stop‘, etc.,
horizontal and vertical scrollbars,
status bar: the strip at the bottom of the browser window, and the window frame.
Browser chrome can be modified through the use of ‘skins’; (usually) third-party software extensions that can be used to customise colour, graphical treatment and interface metaphor.
For more reading Browser and GUI Chrome
Chrome Browsers are User Interface. With the file menu and setting menu ect It also includes back forward and refresh.
At the botton of the page it contains the status bar how much is loaded ect.
It also can include the minimise maximise and the close buttons. Exlcuding the webpage content.
I am creating a HTML5 web app for mobile devices and was asked to hide the browser nav bar (the back & forward buttons) (typo here prev.). How can I achieve that?
I think I should be able to achieve that using Phone Gap. But I wonder if its possible for a "normal" web app to hide the browser bar? I think its possible if I pin the web site/app to the home screen?
iPhone has http://ajaxian.com/archives/iphone-full-screen-webapps, but what about Andriod at least?
I know this question is a bit out of date at this point so here is an update:
On Safari for iOS 7+ this solution is great:
<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
The minimal-ui attribute makes the browser hide all the buttons while keeping the taskbar intact.
I have not tested this for android.
If you can use JQuery in your web-app than I would suggest you to go for NiceScroll plugin.
It can be used for both mobile and desktop browsers and will hide the browser's scrollbars. If your code is going beyond the viewport height of browser than it will make a custom scrollbar which will fadeout if not in use.
Here is its Demo.
Edit:
As per your update, I would like to add that I am actually not a native mobile web-app developer but while searching for your problems I found some SO questions that can help you to lead the way further:
Removing address bar from browser (to view on Android)
Fullscreen Web App for Android
And these tutorials:
Full Screen Web Apps
Best Practices for Web Apps
You could use this application for Android: Kiosk Web/Html Browser, it creates a folder in your sd card where you can put the html, showed in fullscreen "immersive mode".
<script> function requestFullScreen() {
var el = document.body;
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen
|| el.mozRequestFullScreen || el.msRequestFullScreen;
if (requestMethod) {
// Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") {
// Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
</script>
click
There's such function in the latest Chrome for Android beta:
https://developers.google.com/chrome/mobile/docs/installtohomescreen
EDIT
New answer
Much has change since this question was asked. There now is good native support for scrolling, fixed position, and the browser bar of most OS is a lot smaller then back then. Since this is the case I would advice not to resort to scrolling hacks as most sites and answers recommend. Sticking to the rules of the OS will improve the stability, usability and future compatibility of your webapp.
Old answer
It's possible for iPhone when somebody saves it as a webapp to the homescreen. This works if you add the proper meta tags.
For the standard browsermode it's a bit trickier you have to fallback to hacks. Basically the address bar disappears when you scroll (for Iphone and most of the times for android). You can fake this with javascript. Mobile tuts also has a good article on it:
http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/, but this only works when content is longer the screen resolution.
I am developing a web system for training and the trainer can show the content by zooming with the css3 property that increases the size of the screen.
What I'm trying to achieve is a PowerPoint style presentation, which fills the screen. The problem is that my webpage can be a combination of HTML, Flash, image or audio, or even 4 at a time.
How can I accomplish this? One idea I have is to create an image of the contents of the webpage and attach it to a flash and put it in full screen. Is there a better solution or maybe some software or something?
Thanks in advance for the help.
EDIT
I know browser have the functionality to go full screen, but what I'm trying to do is take a part of the webpage (because in the page are the menu, toolbars, etc) that is in a div.
HTML5 Fullscreen API:
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen();
// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();
Also, check out this for making a presentation with HTML5:
http://slides.html5rocks.com/#landing-slide
It seems to me that it's best to let the user control this. F11 works in all browsers (that I know of) to toggle full-screen on and off.
HTH
Most browsers support pushing F11 to go into full screen mode....
Most web browsers have a full screen mode - hit F11 on a Windows machine with either Internet Explorer or Firefox and they will go full screen. Hit escape to exit full screen.
You may also want to conside using S5 ( http://meyerweb.com/eric/tools/s5/ ) to make HTML based presentations.
Good luck!
https://www.w3schools.com/howto/howto_js_fullscreen.asp
This use element.requestFullscreen() method