CSS Media Queries styles that can be applied to simple filters. Easily display device according to the nature of the content (including the display type, width, height, direction, and even the resolution) through the media queries to change the style.
In this article you will see CSS Media Queries For iPhone 6 and 6+ Portrait and Landscape view. Hope it will help you in your project.
Here is the css3 media query for iPhone 6 and iPhone 6+
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/* ----------- iPhone 6 ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- iPhone 6+ ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { } /* Portrait */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) { } |
Support media queries
CSS Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on most modern smartphones and other screen-based devices. Although older versions of IE don’t support media queries, you should start using them now. Click here to check out our article on media queries support for Internet Explorer (IE) 7 and Internet Explorer (IE) 8.
Testing media queries
Testing your code is important. Testing for tablets and smartphones complicates testing since ideally you would have an array of devices at your disposal. Luckily, you can test most queries without possessing the actual device. It’s always better to have the real thing in front of you, but for the purposes of this article, using a simple browser will help you understand how queries work.
