iOS7 - The Return Of The Splash Screen

Spoiler: code and examples showed or used in this post are meant to be working, for demo purpose, on iOS7 iPod or iPhone only. One day I might improve the demo in order to work the same in other browsers too.

If you haven't read yet this great post from @firt entitled Safari on iOS 7 and HTML5: problems, changes and new APIs you probably should before you can understand what is this about ... done? Great!

Some Clarification

Maximiliano took mobile twitter to show what happens when you visit a webpage in landscape mode where no previous, well known and tested, iOS trick would make it in order to have a better, full screen resolution.
However, problems are the same in the portrait mode: there's no way, if you use any overflow: auto; or touch in your page, to see the magic morph happening in the surrounding Safari Mobile UI.
On top of this, when you apply or pay for Apple Beta Testing or Developer, you are under an NDA/EULA you can hardly report problems even to Apple itself since it's very easy to be in troubles even saying "hey, I've tested stuff here and didn't work" ... where the place is publicly reachable and you are showing premature problems... right?
... oh well, back to this post ...

ReIntroduction To Safari Mobile Full Screen

One example is usually better than thousands of words ... so here the example that will work as expected on iOS7 on iPod or iPhone, 'cause as Maximiliano said in his post, there's no way to obtain a proper full screen on iPad (but probably that ain't needed anyway).

It's very important that you visit the example page before I can explain what is this about so please do it and come back after if the source code isn't explicative enough :)

Insert Coin, And Press Start!

Even if the Wikipedia definition is jurassic, since the splash screen has been used in Flash WebSite since ever and most of the time in a totally dynamic way, Apple gave us only one possibility to have a full screen on its devices: we need to teach the user how to reach a full screen experience!

Actually Not So Bad As It Sounds

Thanks to CSS position:fixed and a background that keeps moving regardless in the OS itself, we could make the road to the full-screen playful and fun.
Somehow, reaching the full screen in the phone through the browser could be used as leveling-up the user itself when it comes to a game.
In my example you can try to rotate, change, do things with the device, until you reach again the full screen possibility. Why couldn't this be an option? It works in both portrait and landscape too and we have an extra "bonus" for the playing user ^_^
As summary: isn't a playful splash screen a way less boring introduction to an app or game than just a static image, as native apps guys are used to these days? ;)

The Trick In A Nutshell

In order to be able to reach a full screen in iOS7, the body of the document must have style.height = (screen.height + 1) + 'px';, where the height needs to be the width once in landscape ...
And that's pretty much it! Test This Page if you don't believe me, and you'll notice that just scrolling up in both portrait or landscape section you'll find yourself on a full screen.

Enjoy yet a new modern web era hack because we haven't learned yet that W3C APIs are there for good reasons and nothing bad would have ever happened simpyl following them rigorously.


Pssss, hey ... in portrait, just screen.height will do, without the plus one ... however, plus one puts the browser in a sort of "must go full screen" state so ... you've been warned ;-)

Comments

Post a Comment

Popular posts from this blog

8 Things you should not be afraid of as a Developer

Change In Software Development there is no such thing as stagnancy. Everything you develop now is just another version of a component that will probably change in the future. Change is the most common thing in Software Development, and you're better of accepting it as a fact. Expect future changes to everything you develop, and therefor design your Code more modular. This makes changes more easy and increases the Quality at the same time. Adapt the concepts of DRY and YAGNI . You will often come to the Situation, where you look at your Code and imagine that you could have done that "better". Don't let this thought prevent you from sleeping. Take action immediately and Refactor ! If you don't do it now, you will probably never do it. The longer you wait, the harder and more costly it gets. And you slowly grow up a mess you cant deal with anymore. "Good code is code that is easy to change. Code tends to change until it is no longer easy to change. All code bec...
Read more

News

So we just got back from a little Canadian weekend with Thee Oh Sees. We had a blast. There is a lot going on in our world at the moment so we've been a bit busy - sorry for the lack of updates here. We have a whole bunch of upcoming shows, check out the shows section to your right - these include shows with SEX CHURCH, a mini-tour with PYGMY SHREWS, a couple of shows with RUSSIAN CIRCLES, and a little European tour in December. If any of you euros cant make it to see us in December, we will be back in January for a little over a month, and we are very excited. We have a new LP done, it will be out in March on Sacred Bones Records and much touring in support of it shall follow. We have also been informed that Karmic Swamp Records is repressing the "Think" 7" that came out last year. There were only a handful of those pressed so hopefully people that missed out on getting them can grab one now. We will post here when it is available. Also, thanks to everyone who has o...
Read more

Why REST is so important

Image
This post is dedicated to REST, an architectural style of shaping webservices and the most misunderstood concept in the history of IT. This post is addressed to you who is designing webservice apis not being fully aware what REST actually means. I'm trying to give you the idea. This post is also addressed to you who think to know what REST means, when in reality you have no clue, just yet. Yes i have met such people in the past - plenty of them. It's not going into the details of the Richardson Maturity Model , and it's not gonna make you a REST expert. There are plenty of guides on the web for that: slides, youtube videos, blogposts, books and more. Rather than going into the details, i'm going to link some good resources at the end of this post. So lets start with The meaning of REST Representational State Transfer. This sentence is not only what REST stands for, it is also the tiniest possible description of what REST actually means. Didn't get it? Read it aga...
Read more