Following is head section:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-startup-image" href="/startup.png">
<script src="http://www.google.com/jsapi"></script>
<script>
window.top.scrollTo(0, 1);
alert('ok');
google.load("jquery", "1.4.1");
google.load("jqueryui", "1.8.0");
</script>
</head>
using iOS 4.2.1
Above is not working for me. Browser Address bar and bottom toolbar are still there. I have tried some tutorials but I am unable to change anything. Any idea?
For iOS 7.1, you can set this in your header to minimize the UI:
<meta name="viewport" content="width=device-width, minimal-ui">
It was introduced in iOS 7.1 beta 2. This site was instrumental in helping me understand how minimal-ui works: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
You cannot programmatically hide the toolbar in Mobile Safari.
Your users need to add your web app to their home screens in order for the bars to be hidden when they next launch your app by tapping its icon. This is done by tapping the middle button in the toolbar, then choosing Add to Home Screen. You may need to display a message informing your users to do this.
Related
Having read how to add a custom home screen icon for my web app, I have spent days trying to make it work and whatever I do, the Add to Home Screen process results in an icon based on the screen shot of the current web page.
I have tried using the default file names alone
I have tried using the <link rel="" href=""> definitions and the icons
I have tried putting the icons in the root directory and one level down
I have tried 57x57, 72x72 and 114x114 sized icons, with and without the sizes definition
I have tried precomposed and normal with and without the corresponding change to the rel name
But whatever I do the Add to Home Screen process on my iPhone 4 running iOS 6.3 ignores whatever icon I define and gives me a screen shot based icon. I am tearing my hair out.
How can I find what is going wrong? How do I debug this process to find what is wrong? I have mobile safari linked to safari on the desktop to see what is going on but I am none the wiser.
You might be missing some meta definitions. For example this works in our web apps. Check that the png you're using is valid image.
<!DOCTYPE html>
<head>
<link rel="apple-touch-icon" href="/img/appicon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/img/appicon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/img/appicon-114.png" />
<link rel="shortcut icon" href="favicon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
...
Hi I have a problem with iPhone web app. The problem is that the website is moves under the statusbar when I add the app to to the home screen.
So for example my header block is not fully shown.
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
Here is the image showing the problem.
Try to change:
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
into:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
I had the same problem where this was set to black-translucent and setting it to black removed the problem.
I want my iphone to autoscale my website on rotation.
when I use this line of code it works:
<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />
But the problem is that it activates both of my CSS for portrait and lanscape even though it should activate in landscape mode only one:
<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width : 480px)" type="text/css" href="css/mobileStyles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<link rel="stylesheet" media="screen and (max-width : 320px)" type="text/css" href="css/mobilePortraitStyles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
When I use this line instead of the meta above the css works right but no autoscale on rotation:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What is the problem? What should I do?
Besides the meta line above I have these lines as well:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="apple-mobile-web-app-capable" content="yes"/>
I test that on iPhone 4 (using iOS5)
Have you tried using the orientation keyword in your media queries? e.g.
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>
The issue with no auto scale on rotation is an iOS bug. Setting the max scale in the viewport seems to fix it but actually introduces as number of other issues - as you are seeing here it does not resize the viewport so does not trigger the media queries.
You might want to take a look at the workaround.
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.
The following code does not fit onto the iphone screen;
how do I have to define the viewport?
<html>
<body>
<center>
<div id="karteu" style="background: url('../customer/Karten/karte1.jpg') no-repeat left center;width:714px;height:540px;" >
</div>
</body>
</html>
Normally the site should be zoomed, so i first should see the website in small, and then be able to zoom that i see it in the original size, but in my case it does not, when i call the site, the zoom is, that the image has this original size already, and that i have to scroll, but i dont want to scroll,...i want to use the normal safari mobile zoom and then scroll
The solution at the bottom does not zoom anything.
I want to see the overview of the image at the beginning.
Then i want to be able to zoom with the normal safari zoom functions,..
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
use the following meta tag:
<meta name="viewport" content="width=*your site width*, initial-scale=0.30">
works for both tablet and mobile