Search code examples
ioscssweb-applicationsmedia-queries

iOS Web App In-Call Media Queries

I'm working on an iOS web app and somehow forgot to consider how the app looks with the larger in-call header bar. I had a hard time finding the exact media queries I should be using to cover such a case, so I thought I'd outline them here.

Solution

  • Turns out, the header bar adds an additional 20 pixels. So it's fairly easy to handle. Here are the queries if anyone is interested (this assumes you are using the defualt status bar in your app):

    <meta name="apple-mobile-web-app-status-bar-style" content="default" />

    And the media queries:

    /* iPhone 5 */
@media screen and (max-height: 548px) {}

/* iPhone 5 in-call */
@media screen and (max-height: 528px) {}

/* iPhone 4 */
@media screen and (max-height: 460px) {}

/* iPhone 4 in-call */
@media screen and (max-height: 440px) {}