CSS @media query for iPhone 5

Envato Authors Theme Authors
1

Does anyone have a @media query that will only affect the iPhone 5 when in landscape position?

The few I have found on Google don’t seem to be working properly when tested on the device. When in landscape the device is extra wide this time around, I need a media query to work only in this state.

2

tired using device width?

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1136px) {
}
3

There ya go http://halgatewood.com/iphone-5-media-query/

4
Ivor said

There ya go http://halgatewood.com/iphone-5-media-query/

Thanks Ivor, will this play nice with the iPhone 4? I no longer have it for testing :confused: kinda wish I kept it now lol

5
TylerQuinn said
Ivor said

There ya go The Second Wealthiest Hal Gatewood – HalGatewood.com

Thanks Ivor, will this play nice with the iPhone 4? I no longer have it for testing :confused: kinda wish I kept it now lol

Use media query portrait and landscape. Much better. Make elements liquid for resolutions smaller than 800 pixels and tadaa! You’ve solved the problem! :slight_smile:

6
TylerQuinn said
Ivor said

There ya go The Second Wealthiest Hal Gatewood – HalGatewood.com

Thanks Ivor, will this play nice with the iPhone 4? I no longer have it for testing :confused: kinda wish I kept it now lol

Use media query portrait and landscape. Much better. Make elements liquid for resolutions smaller than 800 pixels and tadaa! You’ve solved the problem! :slight_smile:

7
Enabled said
TylerQuinn said
Ivor said

There ya go The Second Wealthiest Hal Gatewood – HalGatewood.com

Thanks Ivor, will this play nice with the iPhone 4? I no longer have it for testing :confused: kinda wish I kept it now lol

Use media query portrait and landscape. Much better. Make elements liquid for resolutions smaller than 800 pixels and tadaa! You’ve solved the problem! :slight_smile:

I was thinking about this, but most responsive frameworks use set widths (skeleton I am using being one of them) so this is a real pain. Looks like I will be spending the rest of my day messing with media queries :slight_smile:

I’m just glad the theme is close to done so really its just about tailoring a special view for the IP5’s wide screen.

8

When tested on the device I found none of these worked.

For anyone trying to work with the new iPhone 5 in landscape try using this media query:

@media only screen and (min-width: 560px) and (max-device-width: 1136px) {

/* iPhone 5 CSS */

}

Source: http://www.campaignmonitor.com/blog/post/3811/what-the-iphone-5-means-to-responsive-email-and-web-design