I want to make html5 fullscreen app. I made a page and added it as an icon to my iphone. I added metatags:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, user-scalable=no" />
What I wanted to achieve is: black status bar on top (this does not work and I do not know why. It is still default status bar...anyone ideas?) without possibility to zoom (like in facebook app) - this works fine.
Now the problem - I can scroll on my iphone even if my app fits on the screen. It bounces back, but I dont want this behavior. I would like to disable that and enable scrolling for a particular div (.ui-content). How can I achieve that?
EDIT:
status bar is black now. It changed itself after some time. Was the previous version cached on the iphone or what?
This will prevent scrolling on the whole page
document.ontouchmove = function(e) {e.preventDefault()};
In your case, where you want some divs to be scrollable, and some not to, you should be able to catch the event before it gets to the document
scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};
If your using Cordova 1.7+, open the Cordova.plist file and set the key UIWebViewBounce to NO
Extending dmanxii's approach here is what we are doing.
$("body").on("touchmove", function (event) {
if ($(event.target).is(".WhatEverClass") || $(event.target).parentsUntil().is(".ParentClass")) {
//console.log("NOT Disabled");
}
else {
//console.log("Disabled");
event.preventDefault();
}
});
Related
I want to make a simple webpage with a JavaScript game look like an app on the iPhone. I know I can save a bookmark to the homescreen and that looks like an app and I know I can set the apple-itouch-image for the thumbnail in my HTML. But when you click on the app on the homescreen, it's clear this is just a webpage. How can I get rid of the URL and search bar at the top like Google Reader does? It's fine to see that bar if you later scroll up.
Is it possible to dive right into full-screen mode when the webpage is clicked?
I'm not looking for anything like PhoneGap, I just want to make a simple webpage with JavaScript look like an app, I don't want it to actually be an app.
You can put some meta tags in your head block of the page. Try these:
<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" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
viewport sets width and controls scaling and zooming.
apple-mobile-web-app-capable informs the Apple iOS that the application can be installed to the users springboard so that it starts the Safari Mobile browser without a menu bar
apple-mobile-web-app-status-bar-style controls the look of the thin status bar at the top of the screen.
Another useful line is:
<link rel="apple-touch-icon-precomposed" href="myicon.png"/>
Which will give the app a custom icon once installed.
You need to define a few <meta> tags, most notably apple-mobile-web-app-capable. See a full tutorial here http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/
Add
<meta name="apple-mobile-web-app-capable" content="yes" />
Then it should work after it was saved to homescreen.
I am using the StageWebView Class to show html pages inside my iOS app. Everything is working fine except for the scrolling. It allowing the end-user to scroll the entire webview and is showing an unsightly gray background after reaching the end of the pages content.
My question is: Is there a way to disable the scrolling past the content of the page?
I don't think there's a way to do what. The StageWebView uses the iOS default browser which implements this feature (with a different background color, the behavior is the same though).
Did you try with this viewport?
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The important part is user-scalable=no which should remove the "scroll bounce" of the iOS browser.
As the title says, i need to disable vertical bounce on iphone on my mobile web form application. Ive tried alot of different things, but most of them disables my form or horizontal scroll and bounce as well. Any ideas?
Im using jquery.mobile btw :)
Update:
I actually managed to get the code from the first answer working somewhat:
function stopScrolling( touchEvent ) { touchEvent.preventDefault(); }
document.addEventListener( 'touchstart' , stopScrolling , false );
document.addEventListener( 'touchmove' , stopScrolling , false );
The reason why I couldnt get it to work in the first place, was that there actually was some margin on my body (stupid me).
But. As the layout is fluid and im using jquery.mobile and have <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in the header (I think) it doesnt work properly. The page is zoomed out (view from like a desktop browser) and zooming is disabled. Without the code, the page scales perfectly right from an 50" tv to the smallest nokia on the planet.
Am I doing something wrong? Im starting to think the problem is caused by the body/content somehow being over 100% of the viewport. No idea how though.
use this view port specify your initial zoom level and maintain minimum and maximum zoom level
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I found this answer : https://stackoverflow.com/a/20477023/2525304
They are basically detecting when the user is reaching the top/bottom of the page and then catch the scrolling event with event.stopPropagation(); to prevent any more scrolling.
Old trick with window.scrollTo(0,1); doesn't work. And even worse, the address bar moves only a bit and gets stuck halfway out sometimes.
It is a combination of many things as I have found when researching this issue for myself.
Here's the code that properly works on iOS5:
(I know I'm a little late, but an answer is an answer, hopefully it can help people in the future)
<!DOCTYPE html>
<html>
<head>
<title>Hide Address Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
</script>
<style>
body { min-height: 480px; }
</style>
</head>
<body>
<h1>Content</h1>
</body>
</html>
Source: http://24ways.org/2011/raising-the-bar-on-mobile
Example: http://jsbin.com/isenax/
i guess the code should still work..
anyways here is the correct way to tell mobile safari that you want the full screen:
click me
e.g. use
<meta name="apple-mobile-web-app-capable" content="yes" />
EDIT
Apple uses a new mobile-ui property to display a minimal UI in safari:
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.
use it like this:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
source: https://www.perpetual-beta.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html
Since IOS7 the window.scrollTo trick doesn't work anymore. There is no work around for the moment except to invite the user to add your website to Home Screen.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Is it possible to hide the address bar in iOS 7 Safari?
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
On iOS 7 you can use the minimal-ui meta tag. Unfortunately, that was removed in iOS 8.
For iOS 8 there's a project called brim that is supposed to bring back the minimal-ui type functionality. It can be found here: https://github.com/gajus/brim
anone knows how to remove the bar at the top and bottom on safari iphone. I have this mobile web page am writing and I cannot get rid of the navigation bar. Is that even possible ?
Thanks.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<!-- this is the part responsible for hidding the bottom bar -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
The only issue is that it works only after the user have saved the link to their iphone desktop.
Hope this solves your problems.
You can't remove the bars from the top and bottom of the Safari app. I've seen apps that embed Safari in them without the two bars, but you couldn't do this using Javascript or a metadata tag in your page.
UPDATE
There is trick that lets you hide the address bar by scrolling the page. Something like this:
<script type="application/x-javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){
window.scrollTo(0,1);
}
</script>
You can include <meta name="apple-mobile-web-app-capable" content="yes" /> in the header.
This will remove the two bars when the app is bookmarked on the springboard.
If you want to remove the top bar in mobile Safari, use the code Am posted.