I'd like to remove the Safari navigation bar when users visit my website from an iPhone.
I've tried
window.scrollTo(0, 1)
and am also using
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0;">
in the header.
The problem is that the body tag of my website is set to overflow=hidden so the scroll command does nothing.
Does anyone know a solution?
The following code seems to work as a preliminary fix in portrait orientation.
<meta name="viewport" content="width=320; height=416; initial-scale=1.0; maximum-scale=1.0;">
Related
Is there any way to remove safari address bar in iOS 9.0.2?
I have tried below things to hide address bars but no success.
1. added metatag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
2. added JS code.
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
But no success. can anyone help me with this?
The only way I know is to use your website as a web app. You have to add in your header the following:
Add this for IOS
<meta name="apple-touch-fullscreen" content="yes">
and for Android
<meta name="mobile-web-app-capable" content="yes">
after add your web site to Home screen. It will create an icon on your iPhone screen and when you click on it, the app will start in full screen mode without the address bar
Update 2019:
This might not be relevant anymore, please consider Progressive Web App
https://developers.google.com/web/progressive-web-apps/
Please forgive any breaches of protocol and correct me if need be: long-time reader, first-time poster here. I could not find any solutions online that worked or were terribly recent and I was wondering if anyone else had encountered this.
I've been enabling full screen on a web page with meta tags and adding a shortcut to the home screen. I recently upgraded to iOS 8.0.2 on an iPad Air and have noticed that the status bar information (iPad, Wifi, Clock, battery, lock) are now on top of the top edge of the website window instead of over an unusable black status bar. As well, there seems to be white dead space now at the bottom of the page, probably displacing the now non-existent status bar.
Does anyone know how I can either revert back to having the status bar or use the bottom part of the page using javascript?
Many thanks for any help you can provide. I've attached some screen shots and some brief code below.
Cheers,
Kurt
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta id="extViewportMeta" name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<title>Full Screen</title>
<style>
body {
background: #0000FF;
font-size: 140pt;
}
</style>
<body>
A<br />B<br />C<br />D<br />E<br />F<br />G<br />H
</body>
</html>
Images here:
http://postimg.org/gallery/2cm224s78/
Had the same problem and found this little gem of a fix...just put it in the head of your document ::
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
iOS 8 status bar overlay + footer 'bar' in HomeScreen web applications
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">
I'm working on developing a mobile site and for whatever reason the page seems to load as if it is zoomed in every single time. I can scale it easily on a touch phone and it looks just about right, but I was wondering if anyone had any ideas of how to prevent this from happening.
I have tested this issue on Android and iPhone and it seems to be happening on both.
This didn't seem to help all except that I was unable to scale after the page loaded
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1">
You can try to use that :
That block pinch to zoom
<meta name="viewport" content="width=device-width, user-scalable=no" />
I would recommend the following meta, as it sets the page load zoom, rather than blocking the zoom function.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-Edit-
I didn't actually notice you already had initial-scale=1 in your meta. Try with '1.0' instead, I'm not sure if it will make a difference.
I'm using this metatag on my site:
<meta name="viewport" content="width=device-width, initial-scale=.5">
That scale makes things work just perfectly on iPhones (which I know is unorthodox... not using 1), but when the user agent is an iPad what I'd like to do is serve this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Just wondering if any of you guys have clever ideas for how I might do so? Thanks so much!