I’ve posted media queries to help designers & developers for their responsive designes.
Many times We’ve had to design responsive websites targeting specific devices with CSS media queries.
iPad in portrait & landscape @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Your Styles */ }iPad in landscape@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Your Styles */ } iPad in portrait @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Your Styles */ } iPhone 5 in portrait & landscape @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { /* Your Styles */ } iPhone 5 in landscape @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { /* Your Styles */ } iPhone 5 in portrait @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { /* Your Styles */ }
Also dont forget to add this meta tag at head
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
Advertisements