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
Related
Is there a way to enable touch support in the Microsoft Edge browser, similar to Google's Chrome browser?
Currently, if I pinch to zoom the entire page is zoomed in Edge, whereas only the model is zoomed in Chrome.
Make sure to specify "user-scalable=no" as meta-tag in your html page head section. That should fix it, otherwise that an Edge issue for the MS guys I would say ...
<head>
<meta name="viewport" content="width=device-width, height=device-height, minimal-ui, minimum-scale=1.0, initial-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>"Viewer"</title>
<meta charset="utf-8">
</head>
I was able to improve the behavior of pinch/zoom on touch screen with Edge using this css:
html .adsk-viewing-viewer{
-ms-content-zooming: none; /* Disables zooming */
touch-action: none;
}
from the answer: Disable all page-zooming in IE11 on Windows8-Arm
The viewer pivots with finger gestures, but unfortunately doesn't zoom. At least the entire page no longer zooms.
I've developing a store on eBay and having trouble with it on iPhones...
It seems to be nicely responsive in a normal browser, but when I view it on an iPhone it only takes up about half of the screen...
Is there something I'm missing?
The URL is http://stores.ebay.co.uk/the-biggest-toy-store
I've added a viewport tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Thanks!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
in your index.html page and it should work
A few things I noticed in your site, remove the min-width: 760px from your .stBadge (in your media query only). That will help get the footer within the screen boundary. There is also some kind of border up top that has a wider-than-screen width, possible the #gh-top div... but that may be fixed once the other is.
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.
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();
}
});
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.