3

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/

yoozer8
  • 7,361
  • 7
  • 58
  • 93
7537247
  • 303
  • 5
  • 19
  • If this is specifically for a mobile version of your website there are [better](http://stackoverflow.com/questions/9511526/auto-mobile-site-redirect) ways of doing this. – Florin Stingaciu Nov 02 '12 at 18:14

2 Answers2

2

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.

6502
  • 112,025
  • 15
  • 165
  • 265
0

screen.width will return the width of the monitor, not the window, so you can't just shrink your browser window down to get a different value. To do that, you'll want to use window.outerWidth or something.

hexist
  • 5,151
  • 26
  • 33