Iphone 5 compatibility

[kkporter]

Hi all, I am a novice in coding, and very new to baker and laker. Can someone point me where to change for iphone 5 compatibility? Now when I adapt baker and laker code, in iphone 5 the vertical screen is not optimised fully.

[CatherineEng]

Hi - Once you've decided how you want to use the extra space, this might help - I've optimised the media-queries.css for iPhone 5 in my project by including these:

/************************************************************************************
iPhone 5 landscape view 
*************************************************************************************/
@media screen and (max-width: 1136px) and (max-height: 640px) and (device-aspect-ratio: 40/71) and    (orientation:landscape) {

       #your styles here
}

and for portrait mode:

/************************************************************************************
IPHONE 5 portrait view
*************************************************************************************/
@media screen and (max-width: 640px) and (max-height: 1136px) and (device-aspect-ratio: 40/71) and (orientation:portrait) {

       #your styles here

}

[kkporter]

thanks @CatherineEng, sorry for asking really dumb questions - if I just want the whole screen fill up my Book content with the extra space that Iphone 5 provide, what should i put for #your styles here?

[CatherineEng]

Hey @kkporter - it depends. In general I would say for iPhone 5 in portrait mode, set your container div height:100% or height:536px; - and in the landscape mode, width:100% or width:536px.

If that isn't what you're after i.e. it merely stretches the page and distorts it, perhaps you could post an example of how your page is constructed and I can try to help further.

On Mar 30, 2013, at 10:54 AM, kkporter wrote:

thanks @CatherineEng, sorry for asking really dumb questions - if I just want the whole screen fill up my Book content with the extra space that Iphone 5 provide, what should i put for #your styles here?

—
Reply to this email directly or view it on GitHub.

[kkporter]

Hi @CatherineEng I started off with the Laker example: http://www.lakercompendium.com/downloads/laker-starter-pack-1.4.2.zip, replaced the book folder in Baker, and what I did so far was to put in every CSS files this code that you suggested earlier:

/************************************************************************************
iPhone 5 landscape view
*************************************************************************************/
@media screen and (max-width: 1136px) and (max-height: 640px) and (device-aspect-ratio: 40/71) and (orientation:landscape) {

   width:100%}

/************************************************************************************
IPHONE 5 portrait view
*************************************************************************************/
@media screen and (max-width: 640px) and (max-height: 1136px) and (device-aspect-ratio: 40/71) and (orientation:portrait) {

   height:100%;

}

However seems it is not doing anything in my project, for both simulator and real device I still see the rest of IPhone 5 screen blacked out and not used. Please tell me what I did wrong, thanks!!

[ffranke]

Maybe its because of a bug regarding the viewport settings, see: http://www.kylejlarson.com/blog/2012/iphone-5-web-design/

[kkporter]

Thanks @ffranke I took away the width=device-width in all the html pages, but still not working.
My book folder is here, @CatherineEng Please shred some light on how to make this work. thanks!!
http://dl.dropbox.com/u/41256113/book.zip

[ffranke]

hmm, maybe its a baker problem then?

[kkporter]

I believe it was because I used the github version instead of the official Baker 4.0 version when I made the standalone app, which is causing the problem. I re-do the standalone steps to the official 4.0 version and it worked!! Can close this ticket, thanks everyone!