CSS @media query for iPhone 5

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.

tired using device width?

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

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

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 :/ kinda wish I kept it now lol

TylerQuinn said

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 :/ 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!

TylerQuinn said

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 :/ 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!

Enabled said

TylerQuinn said

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 :/ 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!

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

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.

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