Wednesday, September 24, 2014

Media queries, PhoneGap and iPhone 6 / iPhone 6 Plus

If you’re a hybrid app developer using PhoneGap/Cordova, you’re probably already tinkering with getting your media queries updated for the larger Apple devices.

If you need to target the specific devices, the following have worked in testing for me (your mileage may vary):

iPhone 6:
@media screen and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) { ... }

iPhone 6 Plus:
@media screen and (min-device-width : 414px) and (max-device-height : 736px) and (max-resolution: 401dpi) { ... }

You’ll also need to make sure you’re specifying the necessary new splash screens in your bundles, otherwise you’ll revert to scaling.

Give it a shot!

posted by Dustin Vannatter at 1:43 am  

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.