Menu
Since my website doesn't look good at all on a small screen, I want to create a JS function that redirects me to a mobile version of the page when width of the screen is smaller than or equal to 800px.
Here is the code for it:
if (screen.width <= 800) {
document.location ="index_mobile.html";
};
If the code works, then when I shrink down the browser window to 800px wide, the index_mobile.html should show up. But it is not showing up right now. Does anyone know what's going on?
http://jsfiddle.net/RZMmV/
951
Mobile browsers do not report or use the real device resolution because this would make basically all websites on the internet unusable.
What they do is creating a "virtual screen" that has a resolution that is closer to the resolution of a desktop PC and then will implement zooming on the page.
If you want to know the real device resolution you need to disable automatic scaling done on the device. For example for iOS and Android devices this can be done adding
<meta name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
to the <head> section of your page. This informs the browser that the page has been designed for handling low-resolution devices and disables the virtual screen layer.
60
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
