iPhone Media Queries

apple-devices.less

//
// Ok look, I know this is a bad idea but I'm doing this as an experiment. I'm going to get really granular with these,
// which makes them basically unsuable. But it gives a decent overview of the diversity of iThangs.
// So chill.
//
// References:
// http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
// https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#-moz-device-pixel-ratio
// http://stephen.io/mediaqueries/
//

@media-screen: ~"only screen";
@portrait: ~"(orientation: portrait)";
@landscape: ~"(orientation: landscape)";
@density-1: ~"(-webkit-min-device-pixel-ratio: 1)";
@density-2: ~"(-webkit-min-device-pixel-ratio: 2)";
@density-3: ~"(-webkit-min-device-pixel-ratio: 3)";

//
//  Phones
//

// basic dimensions
@iphone: ~"(min-device-width: 320px) and (max-device-width: 480px)";
@iphone-portrait: ~"@{iphone} and @{portrait}";
@iphone-landscape: ~"@{iphone} and @{landscape}";

@iphone-5: ~"(min-device-width: 320px) and (max-device-width: 568px)";
@iphone-5-portrait: ~"@{iphone-5} and @{portrait}";
@iphone-5-landscape: ~"@{iphone-5} and @{landscape}";

@iphone-6: ~"(min-device-width: 375px) and (max-device-width: 667px)";
@iphone-6-portrait: ~"@{iphone-6} and @{portrait}";
@iphone-6-landscape: ~"@{iphone-6} and @{landscape}";

@iphone-6-plus: ~"(min-device-width: 414px) and (max-device-width: 736px)";
@iphone-6-plus-portrait: ~"@{iphone-6-plus} and @{portrait}";
@iphone-6-plus-landscape: ~"@{iphone-6-plus} and @{landscape}";

// Viewports
@viewport-iphone-old: ~"@{media-screen} and @{iphone} and @{density-1}";
@viewport-iphone-old-portrait: ~"@{media-screen} and @{iphone-portrait} and @{density-1}";
@viewport-iphone-old-landscape: ~"@{media-screen} and @{iphone-landscape} and @{density-1}";

@viewport-iphone-4: ~"@{media-screen} and @{iphone} and @{density-2}";
@viewport-iphone-4-portrait: ~"@{media-screen} and @{iphone-portrait} and @{density-2}";
@viewport-iphone-4-landscape: ~"@{media-screen} and @{iphone-landscape} and @{density-2}";

@viewport-iphone-5: ~"@{media-screen} and @{iphone-5} and @{density-2}";
@viewport-iphone-5-portrait: ~"@{media-screen} and @{iphone-5-portrait} and @{density-2}";
@viewport-iphone-5-landscape: ~"@{media-screen} and @{iphone-5-landscape} and @{density-2}";

@viewport-iphone-6: ~"@{media-screen} and @{iphone-6} and @{density-2}";
@viewport-iphone-6-portrait: ~"@{media-screen} and @{iphone-6-portrait} and @{density-2}";
@viewport-iphone-6-landscape: ~"@{media-screen} and @{iphone-6-landscape} and @{density-2}";

@viewport-iphone-6-plus: ~"@{media-screen} and @{iphone-6-plus} and @{density-3}";
@viewport-iphone-6-plus-portrait: ~"@{media-screen} and @{iphone-6-plus-portrait} and @{density-3}";
@viewport-iphone-6-plus-landscape: ~"@{media-screen} and @{iphone-6-plus-landscape} and @{density-3}";


//
//  Tablets
//

// basic dimensions
@ipad: ~"(min-device-width: 768px) and (max-device-width: 1024px)";
@ipad-portrait: ~"@{ipad} and @{portrait}";
@ipad-landscape: ~"@{ipad} and @{landscape}";

// ???????
@ipad-pro ~"(min-device-width: 1024px) and (max-device-width: 1366px)";
@ipad-pro-portrait: ~"@{ipad-pro} and @{portrait}";
@ipad-pro-landscape: ~"@{ipad-pro} and @{landscape}";

// viewports
@viewport-ipad: ~"@{media-screen} and @{ipad} and @{density-1}";
@viewport-ipad-portrait: ~"@{media-screen} and @{ipad-portrait} and @{density-1}";
@viewport-ipad-landscape: ~"@{media-screen} and @{ipad-landscape} and @{density-1}";

@viewport-ipad-2: @viewport-ipad;
@viewport-ipad-2-portrait: @viewport-ipad-portrait;
@viewport-ipad-2-landscape: @viewport-ipad-landscape;

@viewport-ipad-mini: @viewport-ipad;
@viewport-ipad-mini-portrait: @viewport-ipad-portrait;
@viewport-ipad-mini-landscape: @viewport-ipad-landscape;

@viewport-ipad-retina: ~"@{media-screen} and @{ipad} and @{density-2}";
@viewport-ipad-retina-portrait: ~"@{media-screen} and @{ipad-portrait} and @{density-2}";
@viewport-ipad-retina-landscape: ~"@{media-screen} and @{ipad-landscape} and @{density-2}";

@viewport-ipad-air: @viewport-ipad-retina;
@viewport-ipad-air-portrait: @viewport-ipad-retina-portrait;
@viewport-ipad-air-landscape: @viewport-ipad-retina-landscape;

@viewport-ipad-air-2: @viewport-ipad-retina;
@viewport-ipad-air-2-portrait: @viewport-ipad-retina-portrait;
@viewport-ipad-air-2-landscape: @viewport-ipad-retina-landscape;

// ???????
@viewport-ipad-pro: ~"@{media-screen} and @{ipad-pro} and @{density-2}";
@viewport-ipad-pro-portrait: ~"@{media-screen} and @{ipad-pro-portrait} and @{density-2}";
@viewport-ipad-pro-landscape: ~"@{media-screen} and @{ipad-pro-landscape} and @{density-2}";

//
//  Watch
//

// dimensions
@apple-watch-38mm: ~"(min-device-width: 272px) and (max-device-width: 340px)";
@apple-watch-42mm: ~"(min-device-width: 312px) and (max-device-width: 390px)";

// viewports
@viewport-apple-watch-38mm: ~"@{media-screen} and @{apple-watch-38mm}";
@viewport-apple-watch-42mm: ~"@{media-screen} and @{apple-watch-42mm}";
// ...