I have built the following as test scenario: http://dev.driz.co.uk/Spinner/ for a webapp that will run on an iPhone Chromeless. If you open it up on your iPhone and add it to your homescreen you will see it as a full-screen web app complete with startup screen and preloader.
I have made the startup screen and first screen that the user will see the same as per the Apple documentation quoting: "Generally, design a launch image that is identical to the first screen of the app. Avoid including elements that might look different when the app finishes launching, so that users don’t experience a flash between the launch image and the first app screen."
As stated above, I have made them the same to prevent the flash that can happen between the startup and the app itself (usually due to different UI components, of which my don't change on startup). However I still get this flash! It's as though the app is showing the startup and then hiding and then showing the website which includes the showing the splash screen with the startup image again.
Any ideas on how I can combat this? I have even tried setting the html/body itself to have the background image of the startup screen but their is still a flash as it loads in. Also tried using an actual image instead of background, but again same issue.
Ok. Quick answer: Don't use the ios startup image imo, because it just shows very unrealiable and outside of ios you can't use it anyway. I don't know how long I tried to get a decent image to show and once you are talking different devices and formats it's just nasty with all the images you have to provide.
I have done a css/javascript splash screen, which I'm using for my own application (for example here). You can specify a portrait and landscape image (in 4 sizes) which get loaded depending on device.
The background is attached to the splash class, which I'm setting on the body and removing once the app has loaded.
I have put the code inside a repo on Github. Feel free to use. If you have any questions, let me know.
I am betting that the flash you are seeing is the background of the window, or your webview. It is most likely white, and when the app loads, it doesn't render the page immediately, so for a split second you see the white background of the window.
I would try editing the _window.backgroundColor (i'm guessing that property name) on your app delegate or in Interface Builder, and if that doesn't fix it see if you can edit the webview's background color. All may be dependent on whatever toolchain you are using to create the webapp (i.e. phonegap)
I do know that putting a loading image is true for the native app, but no where on the document you linked says it is true for web app as well.
Did you find a solution? I've found the problem is fundamental to the iPhone, regardless of your app.
Take this for example: it shows a website with a background of #ccc with a splash screen of #ccc for the iphone 7.
<!doctype html>
<html style="background-color: #ccc;">
<head>
<title>iOS web app</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="iOS web app">
<meta name="viewport" content="initial-scale=1">
<link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
<h1>iOS web app</h1>
</body>
</html>
https://imgur.com/a/tGiREVM
You can see a flicker while the app loads.
Faster loading apps feel worse, slightly epileptic, with the flicker. And if the splash screen is dark, it looks worse again.
Related
I built a website for myself which I believe is responsive as per my testing with Firefox's responsive mode. I tested all the pages with the iPhone resolution (375*667) both landscape and portrait mode and it worked great.
However when I try to open the same site in Chrome, it does not display properly. It also shows the same effect when viewed from an iPhone.
This is my site - http://v1chu.github.io/
The background images in used in section 2 and 3 are missing whereas it is working fine with Firefox (also in responsive mode). I can't see the background in my device as well.
Also the site content looks very small when viewed in Chrome and device. But it looks just fine when viewed in Firefox.
Please tell me if the way I have built the site is right or not ? Or if something that I have missed which messes up the site on Chrome and devices.
You're heading in the right direction.
Problem #1, Background Images
Your background images don't appear because you are using the background-attachment property with the value fixed. It sets the background in relation to the viewport (browser window). You're basically pinning the background image to the top of the page and by the time you get to your 2nd and 3rd sections you've scrolled past the background image.
You have set background-attachment via the shorthand background property. Remove fixed from the background property.
background: url( '../img/aboutme.jpg' ) no-repeat center;
Problem #2, Text size
You need to use a responsive meta tag. Here's one that I use:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The problem seems to be here:
.s2 {
background: url(../img/aboutme.jpg) no-repeat center fixed;
}
I removed the fixed and the background displayed in chrome
s2 {
background: url(../img/aboutme.jpg) no-repeat center;
}
I am developing a mobile web site using Sencha Touch. In iOS7 Safari I cannot make the top address bar & the toolbar below go away. Sencha used to handle this upto iOS6 but some recent changes in iOS7 is causing this issue.
http://java.dzone.com/articles/safari-ios-7-and-html5
I read the above link & it seems this is also an issue for HTML5 Games & a few other apps.
The old window.scrollTo() which worked for iOS6 no longer works.
Add minimal-ui in your meta tag viewport, this will hide he address bar and browser controls in safari iOS7:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
More info on iOS7 and fullscreen mode for mobile websites: http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7
With iOS 7 I don't think you really have a choice. Obviously Apple doesn't want developers doing this anymore, and even if someone finds another workaround it probably won't stick around for that long.
Honestly, I think getting fullscreen functionality is a fair trade off for users to install the app to their home screen. Obviously there are certain cases where this isn't true, but I guess I find it understandable to some degree. You should still be able to add the following meta tag and it will be fullscreen once added to home screen:
<meta name="apple-mobile-web-app-capable" content="yes">
There are a few nice libraries out there that add an "add to homescreen" prompt that you can set up to be rather unobtrusive with custom messages. In this case, might be best to embrace the change...
I have a web app running on Safari on an iPad. I am starting the app from the iPad home page. I want the app to start in full-screen mode, and to continue running in full-screen mode (i.e. not showing the Safari address bar).
I want to prevent the "pinch-to-zoom" and pan/zoom functions so the page always remains static. How do I do this?
If you put the following meta tag into the html output and then start the app from the homepage then it will be fullscreen when it runs:
<meta name="apple-mobile-web-app-capable" content="yes">
The following is to prevent the user from zooming:
<meta name="viewport" content="width=device-width,user-scalable=no">
So you can make a website go "full screen" and hide the addressbar/chrome on ipad if the user adds your page to their home screen, which makes an icon on the home screen that they launch your site from. You just put some meta tags like this:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
However, I haven't been able to get a site to hide the browser chrome when the page is just in a normal browsing session (the user hasn't launched your site directly from an icon on their home screen). Is it possible to do so? How?
According to the Apple Docs it doesn't specifically say you can't (however as you've noted, it appears to only behave as desired when the site has been added to your home screen).
I also noted that on the Apple Support Forum the consensus seems to be that you need to launch from the home screen to get the desired effect.
Quote from Docs:
apple-mobile-web-app-capable
Sets whether a web application runs in full-screen mode.
Syntax
<meta name="apple-mobile-web-app-capable" content="yes">
Discussion
If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.
You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.
Availability
Available in iOS 2.1 and later.
I found this works,
$('body').delay('1000').animate({ scrollTop: '0px' }, 'slow');
I noticed that scrolling down removed it, so scrolled 60px (height of the chrome), but that hide it and scrolled down the page, but a scroll of 0px, assuming your page has started at the top (not on a # target), fools it!
I guess you could even remove the delay and animate, but I wanted it to be smooth, and not too jerky.
I have a web app running on Safari on an iPad. I am starting the app from the iPad home page. I want the app to start in full-screen mode, and to continue running in full-screen mode (i.e. not showing the Safari address bar). I have therefore added the following meta-tags to the site master page:
<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">
I start the app from the iPad home page and it starts nicely in full-screen mode (not showing the Safari address bar) but when I click a to another page in the site (with the same meta-tags, as inherited from the same site master page) then the address bar suddenly pops into view (and remains in view). The link looks as follows (I am using jQueryMobile):
Home
How can I force the web app to remain looking like a 'native-app' by keeping the address bar hidden when navigating between internal pages?
It would appear that Mobile Safari does not 'natively' support full-screen if you use external links. As soon as you use an html anchor then it flips out of full-screen mode. The window.scrollTo may be a workaround that will work for some people, but I also want to avoid the way that the UI flips itself when transitioning to the non-full-screen mode too.
The answer is to use window.location.assign(). This keeps the full-screen app in 'native' full-screen mode. You just need to refactor your tags into javascript window.location.assign(url) calls - that then keeps the thing in full-screen.
Add jQuery and you don't have to modify any links,
$(document).ready(function(){
$('a').click(function(event){
event.preventDefault();
window.location.assign($(this).attr('href'));
});
});
Example link:
Next page without safari
maybe this: source
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});