Hey there, I'm looking for some help with customizing my website for different devices.
I've been experimenting with media queries and successfully adapted my phone (Motorola Moto G) to both landscape and portrait orientations without using the viewport tag. Here's the CSS code I used:
Landscape:
@media screen and (max-width: 1000px) and (min-aspect-ratio: 13/9) {
}
Portrait:
@media screen and (max-width: 1000px) and (max-aspect-ratio: 13/9) {
}
While my phone displays the web content perfectly, I'm concerned about how it will appear on other devices. Whenever I try adding the viewport tag, everything becomes distorted or oversized:
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm struggling to understand why this happens and even found that a tool like Responsinator shows my page in a distorted manner:
Can someone explain why the resolution of a Moto G (1280x720) causes such distortion when using the viewport tag? I've tried searching online but haven't found a clear answer yet.
Appreciate any guidance you can provide.