725 posts WordPress Ninja
    Has referred 1000+ members Has sold $125,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 10+ items on Envato Market
+8 more
TylerQuinn says

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.

3220 posts
    Has sold $5,000+ on Envato Market Has collected 10+ items on Envato Market Located in United States Has been part of the Envato Community for over 4 years
+1 more
organicbee says

tired using device width?

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1136px) {
}
4323 posts ThemeForest Reviewer
    Has referred 1+ members Has sold $40,000+ on Envato Market Has collected 50+ items on Envato Market Member of the Envato Team
+12 more
Ivor Envato team says
725 posts WordPress Ninja
    Has referred 1000+ members Has sold $125,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 10+ items on Envato Market
+8 more
TylerQuinn says

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

4195 posts Community Mod Building awesome stuff for your mobile devices!
    Has referred 100+ members Has sold $125,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 1+ items on Envato Market
+14 more
Enabled Volunteer moderator says


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

4195 posts Community Mod Building awesome stuff for your mobile devices!
    Has referred 100+ members Has sold $125,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 1+ items on Envato Market
+14 more
Enabled Volunteer moderator says


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

725 posts WordPress Ninja
    Has referred 1000+ members Has sold $125,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 10+ items on Envato Market
+8 more
TylerQuinn says



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.

725 posts WordPress Ninja
    Has referred 1000+ members Has sold $125,000+ on Envato Market Has been a beta tester for an Envato feature Has collected 10+ items on Envato Market
+8 more
TylerQuinn says

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

by
by
by
by
by
by