Closed kkporter closed 11 years ago
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
}
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?
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.
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!!
Maybe its because of a bug regarding the viewport settings, see: http://www.kylejlarson.com/blog/2012/iphone-5-web-design/
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
hmm, maybe its a baker problem then?
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!
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.