I have a mobile webapp that I am developing using jquery mobile. I am prompting the users that they can use the add to homescreen function to load the webapp from the desktop. When I test the functionality of the splash screen on my iPhone 3GS, the png file which I wish to load does not load with the splash screen, but rather, a "screen shot" of the site with a white-space at the top where it appears the address bar used to be.
Here is my code
<html><head>
<title>Page Title</title>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='default' name='apple-mobile-web-app-status-bar-style'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/mydashboard.min.css" />
<link rel="stylesheet" href="css/add2home.css">
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone4.png" />
<!-- ***Here is my code for splash screen*** -->
<link rel="apple-touch-startup-image" href="Default.png" />
<link rel="apple-touch-startup-image" href="touch-splash-ipad-land.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<link rel="apple-touch-startup-image" href="touch-splash-ipad-port.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- ***My JS files are included under this and the closing of the head tag*** -->
I have tried a 320x460 and a 320x480 png file where the Default.png is. Neither have had any success. From what I've read, I think I'm doing this right, but I could be wrong. I'm basing my opinion on https://developer.apple.com/library/archive/qa/qa1588/_index.html
and
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
So my question is this, has anyone else seen this? If so, what was the cause and what did you do to resolve the issue if you did resolve the issue? If you haven't seen this particular issue, is there anything you might be able to suggest based on my code above?
The Default.png file MUST be 320x460px.
Try removing the launcher from the home screen and re-adding it from Safari.
That is what I had to do to get mine to work.
Related
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.
I have these 2 rules:
<link rel="stylesheet" media="screen and (max-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">
They work on my browser (when I adjust the browser width) but when I check them on my iPhone, either portrait or landscape, it loads both style sheets.
Why on landscape view it loads the 640px style sheet?
the web view size of iPhone safari browser is either 320x480px or 480x320px in landscape for both display type. so the web developer don't need to resize his css for Non-Retina and Retina Displays.
For targeting only Retina Display
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />
In your case the the second style sheet is loaded because in both cases (320 or 480px) your web view is under 640px.
i would recommend to use orientation as css media query for you case.
Add this in the head of your HTML document:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Write max-device-width instead of max-width
<link rel="stylesheet" media="screen and (max-device-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-device-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">
Also, it's better if you define their orientation like this:
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css">
when using
<link rel="stylesheet" media="all and (max-width: 640px) and (orientation:portrait)" href="css/i-hoch.css">
<link rel="stylesheet" media="all and (max-width: 960px) and (orientation:landscape)" href="css/i-quer.css">
on iPhone Mobile Safari the CSS is changed when device is rotated.
The same Page does not load the different CSS when this code is used within the PhoneGap Framework (0.9.5.1). We also had issues with the
<meta name="viewport"
which could be fixed but orientation problems remain.
Any hints how to solve this issue are appreciated. Thanks in advance - Alex
#alex, may be first you have check you css file link with firebug & if the path is correct then
write like this
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" media="all and (orientation:portrait)" href="css/i-hoch.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="css/i-quer.css">
may be that's helpful
Working good with iPad but not iPhone
Any code can I direction to iPad and iPhone
for iPad
<meta name="viewport" content="width=1040px, minimum-scale=0.5, maximum-scale=1.0" />
for iPhone
<meta name="viewport" content="width=440px, minimum-scale=0.5, maximum-scale=1.0" />
iPhone max-width is 480px not 440px
<meta name = "viewport" content = "user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
This sets the viewpoint with the scaleable option off
<link media="only screen and (device-width: 768px)" rel="stylesheet" href="css/ipad.css" type="text/css" title="no title"/>
This is a css file for only iPad
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="css/small-device.css" type="text/css" title="no title"/>
This is a css file for only iPhone
They are conditional comments so they will only apply to specific devices with specified max-widths.
I have a web page for which I made two css files, one for desktop browser and another for iphone.
I do it something like this:
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/css/main.css" media="screen,projection,print" />
<link rel="stylesheet" href="/css/mobi.css" type="text/css" media="only screen and (max-device-width: 480px)" />
On a desktop it works fine, but on iphone I Have some strange behavior, it looks like it loads both files and rules conflict with each other. If I comment out second line (main.css) it works fine on iphone.
so how can I hide it?
thanks
I included WHOISSTAN's php function example from http://mobiforge.com:
function is_mobile(){
$regex_match="/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";
$regex_match.="htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|";
$regex_match.="blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|";
$regex_match.="symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|";
$regex_match.="jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220";
$regex_match.=")/i";
return isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));
}
Then I added this within my <HEAD></HEAD> tags:
<?php
if(is_mobile()) {
?><link rel="stylesheet" href="mobi.css" type="text/css" media="handheld" /> <?php
} else {
?> <link rel="stylesheet" href="main.css" type="text/css" media="screen" /> <?php
} ?>
use mobile detection in php or another server side script so that the other css is not there at all. here is a place to get a good script
http://detectmobilebrowser.com/
the script needs to be modified a lil. it comes in a if statment so if you put it in a function you can return a true or false. Then you can use it like.
if(mobiDetect()){
<link href="mobiStyle.css" />
}else{
<link href="style.css" />
}
You should let mobi.css apply handheld styles on top of main.css. Also, I guess media should be handheld for mobi.css, and not a bunch of text like you have now.
Mobile WebKit applies stylesheets with media type of screen, because it’s meant to behave like a desktop browser with some UI optimisations for mobile, rather than as a mobile browser.
You might consider serving different HTML to iPhone-like browsers, get around it that way. I don’t think there’s any reliable HTML- or CSS-based way to hide CSS from Mobile WebKit.
Ok, I found a solution and it is actually quite simple, just need to use media querys. Something like this:
<link rel='stylesheet' media='screen and (max-width: 480px)' href='css/mobi.css' />
<link rel='stylesheet' media='screen and (min-width: 481px)' href='css/main.css' />
<meta name="viewport" content="width=device-width" />
<meta name="HandheldFriendly" content="true" />
We can change width depending on target device. It works fine on iphone (and most of other smartphones) and also works in all desktop browsers apart from our beloved IE:) to fix this issue just add:
<!--[if IE]>
<link rel="stylesheet" href="css/main.css" media="all" />
<![endif]-->