725 posts WordPress Ninja
  • Has referred 1000+ members
  • Has sold $250,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+9 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
  • Has sold $5,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Achieved the monthly Community Superstar Award
  • Located in 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) {
}
4457 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
+13 more
Ivor
Envato team
says
725 posts WordPress Ninja
  • Has referred 1000+ members
  • Has sold $250,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+9 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

4929 posts Community Mod Building awesome stuff for your mobile devices!
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Achieved the monthly Community Superstar Award
  • Has sold $125,000+ on Envato Market
+15 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! :)

4929 posts Community Mod Building awesome stuff for your mobile devices!
  • Elite Author: Sold more than $75,000 on Envato Market
  • Helps us moderate the forums
  • Achieved the monthly Community Superstar Award
  • Has sold $125,000+ on Envato Market
+15 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
  • Has referred 1000+ members
  • Has sold $250,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+9 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 $250,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+9 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