I've made a simple iPhone webapp and I've set a startup screen and icon and everything. Here's the link to it.
The problem I'm having is that when I save the webapp to the homescreen, a white screen (or else a screenshot of the page I have opened on Safari) shows up first for a few seconds before the startup screen.
I've added other iPhone webapps like JQtouch to my homescreen and opened them and the startup screen shows up straight away.
I'm wondering if I have something wrong in the html code???
Try changing <meta name="viewport" content="width=300px; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> to <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> so the width=device-width and using commas (,) instead of semi-colons (;) except at the end of the line.
Do you have this in your <head>:
<link rel="apple-touch-startup-image" href="myImage.jpg">
See iOS Web App Configuration - mobile-meta-links.html for exact specs:
<!-- startup image for web apps - iPad - landscape (748x1024)
Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="img/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="img/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- startup image for web apps (320x460) -->
<link rel="apple-touch-startup-image" href="img/iphone.png" media="screen and (max-device-width: 320px)" />
Also read that the startup image will only show up if you use the HTML5-doctype
<!DOCTYPE html>
From Icons and splash screens for iOS web apps - retina displays also welcome:
To insert a high-resolution splash screen into the <head>, but only
for iOS devices with a retina display running iOS5 or later:
function hasRetinaDisplay() {
return (window.devicePixelRatio >= 2);
}
function isAppleDevice() {
return (/iphone|ipod|ipad/gi).test(navigator.platform);
}
function iOSNewerThan(majorVersion) {
if(isAppleDevice()) {
// Check the version
var pattern = /iPhone OS (.*) like Mac/;
var result = navigator.userAgent.match(pattern); // Returns "iPhone OS X_Y like Mac, X_Y"
var version = result[1].split(''); // Returns X, Y
var release = version[0];
return (release >= majorVersion);
}
return false;
}
// When we're ready to go...
$(document).ready(function() {
if(hasRetinaDisplay() && iOSNewerThan(5)) {
var highResSplash = '<link rel="apple-touch-startup-image" href="/images/splash-iphone4.png" />';
$('head').append(highResSplash);
}
});
Related
I don't know why my responsive design isn't working for a size with max-width of 320px. I'm trying different sizes for iPad in Chrome and works properly but for iPhone goes wrong. My code is the following:
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/iPhonePortrait.css" media="only screen and (max-width : 320px) and (orientation : portrait)" />
<link rel="stylesheet" type="text/css" href="css/iPadLandscape.css" media="only screen and (max-width : 1024px) and (orientation : landscape)" />
<link rel="stylesheet" type="text/css" href="css/iPadPortrait.css" media="only screen and (max-width : 768px) and (orientation : portrait)" />
The browser is updated, any idea?
You need this as your meta tag<meta name="viewport" content="width=device-width,initial-scale=1.0">.
My ultimate goal is to have on iDevices viewing my website, an image link that on click, plays a video at full screen, and upon finish of video redirects to another webpage. I am open to any solution that achieves my goal, even if it means scrapping the code I've got.
Here is my best attempt as of yet:
This is My current testing site
I was following this stackoverflow post
I am happy with the results on my laptop [edit works on Chrome but not FF 16.0.1 sigh I don't know anymore), but I am currently unable to click the image to play the video on my iDevices (ipad1 & iphone4). I've spent hours attempt to achieve this by researching, trial & error to no prevail.
Here is the code I am working with:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<meta name="description" content="" />
<title>test</title>
<script type="text/javascript">
function videoEnd() {
var video = document.getElementById("video");
video.webkitExitFullScreen();
document.location = "http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/jk5%20all/build.html";
}
function playVideo() {
var video = document.getElementById("video");
video.addEventListener('ended', videoEnd, true);
video.webkitEnterFullScreen();
video.load();
video.play();
}
</script>
</head>
<body>
<video id="video" poster="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/image.png" onclick="playVideo();">
<source src="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/video.mp4" type="video/mp4" />
</video>
</body>
</html>
If a browser doesn't support the fullscreen API (http://caniuse.com/#feat=fullscreen) then that may throw an error in your playVideo function. Try this modification:
function videoEnd() {
var video = document.getElementById("video");
if(video.webkitExitFullScreen) video.webkitExitFullScreen();
document.location = "http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/jk5%20all/build.html";
}
function playVideo() {
var video = document.getElementById("video");
if(video.webkitEnterFullScreen) video.webkitEnterFullScreen();
video.load();
video.play();
}
<video id="video" poster="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/image.png" onclick="playVideo();" onended="videoEnd();">
<source src="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/video.mp4" type="video/mp4" />
I'm embedding youtube videos within my iPhone phonegap app
e.g
<embed id="yt" src="http://www.youtube.com/v/myvidid" width="300" height="199"></embed>
This all works fine as the iPhone recognises these as a youtube videos and will insert the poster image and also invoke the youtube app upon click. However the problem is these youtube embeds are within a scrollable content area, for which I use CSS transformations to move up and down via touch scroll. When the user scrolls the area the video stays static in a fixed position on top of my content. No matter what CSS I add to the embeds, nothing seems to change this behavior.
Has anyone come across this behavior before or found a fix.
Many thanks.
Andrew
I have the same issue and had to use following workaround:
draw images with video thumbnails inside scroller
put play button over thumbnail
handle click event to show video outside of scroller
With code like this:
var videos = [];
$('#scroller object').each(function(i,el){
var movie = $(el).attr("data").replace(/^.*youtube\.com\/v\//,"");
var width = $(el).attr("width");
var height = $(el).attr("height");
var html = '<object style="margin-left:12px;margin-top:10px;" id="video" width="296" height="222" data="http://www.youtube.com/v/'+movie+'" type="application/x-shockwave-flash">' +
'<param name="allowfullscreen" value="true" />'+
'<param name="wmode" value="transparent" />'+
'<param name="src" value="http://www.youtube.com/v/'+movie+'" />'+
'</object>';
videos.push(html);
var thumb = "http://img.youtube.com/vi/"+movie+"/0.jpg";
$(el).replaceWith('<div id="video-'+i+'" style="width:240px;height:184px;background:url('+thumb+') no-repeat;background-size: 100%;"><div class="play-button"></div></div>');
$("#video-"+i).click(function(e,el){loadVideo(this)});
});
CSS code for pay button
.play-button {
position: absolute;
width: 240px;
height: 184px;
background: url(images/youtube_play.png) no-repeat;
background-size: 100%;
background-position: center center;
}
loadVideo function mockup:
function loadVideo(el){
var id = el.id;
if (!id) {
//play button clicked
id = $(el).parent()[0].id;
}
id = id.replace("video-","");
var html = videos[id];
//html contains <object> tag
$('#video-overlay').html(html).show();
}
Here is a nice tutorial Which Saved my Day
http://eisabainyo.net/weblog/2012/01/24/embed-a-youtube-video-iframe-in-phonegap-app/
Also i m posting some codes For a quick Access.
<html>
<head>
<title>YouTube video</title>
<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" />
<script src="phonegap-1.2.0.js"></script>
</head>
<body>
<iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Then make the following changes in Phonegap.plist
![MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
*.youtube.com
*.ytimg.com][2]
Video will play on your Simulator Also.
** EDIT **
This is the code I'm using to detect whether it's a mobile device:
<!-- Javascript inclusion -->
<script type="text/javascript">
var isCE = navigator.appVersion.indexOf("Windows CE")>0;if (isCE){ window.location.href="http://m.mobileversionsample.com/";}
</script>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
}
}
</script>
Went to the Apple store and saw that my mobile site picks up on an iPad as well... Does anyone know how to make an exception for iPads, so that they load the normal site and not the mobile version?
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
About supporting both landscape and portrait mode: http://www.cloudfour.com/ipad-css/
Detecting iPad using Javascript: http://davidwalsh.name/detect-ipad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if(isiPad) { window.location.href="http://m.mobileversionsample.com/";}
That would depend a lot on the code you're using to detect mobile browsers. You're presumably using the User-Agent string to detect something like "MobileSafari" - just add a conditional that skips the redirect if "MobileSafari" AND "iPad" are in the User-Agent string.
How do you set as inline if it's not one of the words listed on the single word media types? (http://www.w3.org/TR/CSS2/media.html#media-types)
<link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" rel="stylesheet" />
The handheld media type is ignored by the iPhone, but I'd imagine the external call above would be in a format somewhat like this:
#media handheld
{
body {margin:0; padding:0;}
}
See example V at http://www.w3.org/TR/css3-mediaqueries/
#media screen and (color), projection
and (color) { ... }