Home › Forums › CSS › Media Queries – NEED HELP › Reply To: Media Queries – NEED HELP
I have tried quite a few things. Here is what I have. I do have the device width meta tag, but let me know if it is incorrect, since I have so many devices that need to work with the site. I’m also including all the media queries. If you can provide me some help, I would appreciate it. There are supposedly two sizes for Windows tablets, so that’s where there are a few media queries for that device in landscape and portrait. I’ve used media queries for awhile now, but never had to include this many devices. I’m trying to find a way to make this work across all. Thank you for any help you can provide.
META IN HEAD:
/* desktop */ @media (max-width: 979px)
/* iPad in portrait———– */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
/Ipad Resolution Starts Here – landscape/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape)
/* desktop and Nexus 10 */
@media (min-width: 1200px)
/* For Android and Nexus */
@media only screen and (min-width: 1200px) and (max-width: 2560px) and (-webkit-min-device-pixel-ratio: 2.0) and (-webkit-max-device-pixel-ratio: 2.0)
/* for Nexus 10 portrait */ @media only screen and (min-width: 750px) and (-webkit-min-device-pixel-ratio: 2.0) and (-webkit-max-device-pixel-ratio: 2.0)
/* for iPhone 4 portrait*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)
/* for iPhone 4 landscape – affecting Windows phone landscape*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)
/* For Windows Tablets2 – Landscape – NEW */ @media only screen and (min-width:1200px) and (max-width:1280px) and (orientation: landscape)
/* For Windows Tablets1 – Portrait – NEW */ @media screen and (min-width:768px) and (max-width:768px) and (orientation: portrait)
/* For Windows Tablets2 – Portrait – NEW */ @media screen and (min-width:720px) and (max-width:720px) and (orientation: portrait)
/* For Windows Phones – Portrait – NEW */ @media screen and (max-width:400px) and (orientation: portrait)
/* Windows Phone landscape */ @media screen and (max-width:480px) and (orientation: landscape)