I am currently using CSS Media Queries to load different templates based on the size of the device. To determine the breakpoints, I compiled a list of display resolutions for my testing devices, including popular models like the Nexus 7 with a resolution of 1280 × 800. However, I encountered an issue when implementing these values in my code.
My approach does not include setting a maximum or minimum width because I am aiming for precise resolution targeting. By replacing 'max-device-width' with a large value, I can get it to work, but for accurate classification into three distinct device categories, I need to ensure that my cut-offs are correct. Is there a difference in CSS resolution handling? Any help would be greatly appreciated!
@media only screen and (device-width:1280px) and (orientation:landscape) {
/*style --code removed for sake of space */
}
@media only screen and (device-width:800px) and (orientation:portrait) {
/*style --code removed for sake of space */
}
Below is the viewport code from my HTML file:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">