725 posts WordPress Ninja
  • Affiliate Level 7
  • Author Level 9
  • Beta Tester
  • Collector Level 2
+11 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.

3439 posts
  • Author Level 4
  • Collector Level 2
  • Community Superstar
  • United States
+2 more
organicbee
says

tired using device width?

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1136px) {
}
4483 posts ThemeForest Senior Reviewer
  • Affiliate Level 1
  • Author Level 6
  • Collector Level 3
  • Envato Team
+14 more
Ivor
Envato team
says
725 posts WordPress Ninja
  • Affiliate Level 7
  • Author Level 9
  • Beta Tester
  • Collector Level 2
+11 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

4948 posts Community Mod Building awesome stuff for your mobile devices!
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
  • Author Level 8
+17 more
Enabled
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! :)

4948 posts Community Mod Building awesome stuff for your mobile devices!
  • Trendsetter
  • Weekly Top Seller
  • Elite Author
  • Author Level 8
+17 more
Enabled
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
  • Affiliate Level 7
  • Author Level 9
  • Beta Tester
  • Collector Level 2
+11 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
  • Affiliate Level 7
  • Author Level 9
  • Beta Tester
  • Collector Level 2
+11 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