I made a responsive website that works great with different screen resolutions. I use three different media queries - from 0 to 640, from 640 to 960 and above. In any case, if I try to open on my Samsung Galaxy Note2, which uses 720x1280, since it has a pixel ratio of 2, it reads the website as a 360x640 device, but with 640-960 styles.
How can I be sure that the site will be displayed in its original resolution?
I included this in the header:
<meta name="viewport" content="width=720, initial-scale=1, maximum-scale=1, user-scalable=no" />
If I add something like this to my stylesheet file
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@viewport {
max-zoom:50%;
width:720px;
}
}
It works fine in Chrome emulation mode, but not if I test it on a real mobile device.
EDIT: Woo-hoo ... I found a way to do this using JavaScript.
document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio)+', maximum-scale=1.0, user-scalable=0');
initial-scale.