725 posts WordPress Ninja
  • Envato Studio (Microlancer) Beta Tester
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Most Wanted Bounty Winner
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Bought between 10 and 49 items
  • Exclusive Author
+3 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.

3192 posts
  • Sold between 5 000 and 10 000 dollars
  • United States
  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
  • Exclusive Author
organicbee says

tired using device width?

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1136px) {
}
4317 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Envato Studio (Microlancer) Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer says
725 posts WordPress Ninja
  • Envato Studio (Microlancer) Beta Tester
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Most Wanted Bounty Winner
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Bought between 10 and 49 items
  • Exclusive Author
+3 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

4145 posts Community Mod Building awesome stuff for your mobile devices!
  • Community Moderator
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Interviewed on the Envato Notes blog
  • Author had a Free File of the Month
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Tutorial to a Tuts+ Site
  • Won a Competition
+9 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! :)

4145 posts Community Mod Building awesome stuff for your mobile devices!
  • Community Moderator
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Interviewed on the Envato Notes blog
  • Author had a Free File of the Month
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Tutorial to a Tuts+ Site
  • Won a Competition
+9 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
  • Envato Studio (Microlancer) Beta Tester
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Most Wanted Bounty Winner
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Bought between 10 and 49 items
  • Exclusive Author
+3 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
  • Envato Studio (Microlancer) Beta Tester
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Most Wanted Bounty Winner
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Bought between 10 and 49 items
  • Exclusive Author
+3 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