"media query, browser & mobile device css hacks (iphone)"
Bootstrap 4.1.1 Snippet by tapan

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h1> Media CSS & Hacks </h1> </div> <div class="row"> <h3>Media Query CSS </h3> <h3>All Browsers CSS hacks (IE9, IE10, IE11, MS Edge, Safari, Mozilla Firefox, Google Chrome ) </h3> <h3>Mobile device css hacks (iphones)</h3> </div> <div class="row"> <p> Please find all css hack in CSS Tab </p> </div> </div>
/* ----------- Media Query ----------- */ /* ##Device = Desktops, ##Screen = 1281px to higher resolution desktops */ @media (min-width: 1281px) { } /* ##Device = Laptops, Desktops, ##Screen = B/w 1025px to 1280px */ @media (min-width: 1025px) and (max-width: 1280px) { } /* ##Device = Tablets, Ipads (portrait), ##Screen = B/w 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) { } /* ##Device = Tablets, Ipads (landscape), ##Screen = B/w 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { } /* ##Device = Low Resolution Tablets, Mobiles (Landscape), ##Screen = B/w 481px to 767px */ @media (min-width: 481px) and (max-width: 767px) { } /* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = B/w 320px to 479px */ @media (min-width: 320px) and (max-width: 480px) { } /* ----------- Chromex and safari CSS ----------- */ @media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari and Chrome, if Chrome rule needed */ .your-class {your css property} /* Safari only css */ ::i-block-chrome, .your-class {your css property} } /* ----------- Safari Only CSS ----------- */ @media only screen and (-webkit-min-device-pixel-ratio: 1) { ::i-block-chrome, .your-class {your css property} } /* ----------- IE Only CSS ----------- */ @media screen and (min-width:0\0) { /* IE 9, 10 & 11 CSS */ .your-class {your css property} } @media screen and (min-width:0\0) and (min-resolution: .001dpcm) { /* IE9 Only */ .your-class {your css property} } @media all and (-ms-high-contrast:none){ /* IE10 */ .your-class {your css property} /* IE11 */ *::-ms-backdrop, .your-class {your css property} } /* ----------- MS Edge Only CSS ----------- */ @supports (-ms-ime-align:auto) { .your-class {your css property} } /* ----------- Mozilla Only CSS ----------- */ @-moz-document url-prefix() { .your-class {your css property} } /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- iPhone 5 and 5S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { } /* Portrait */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- 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) { } /* ----------- iPhone 8 ----------- */ @media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) { } /* ----------- iPhone 8+ ----------- */ @media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : 3) { } /* ----------- iPhone X ----------- */ @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }

Related: See More


Questions / Comments: