MEDIA QUERIES to Load specific HTML file

**xFlashStudentx** · July 28th, 2012, 08:14 PM

Hello. I'm looking for a short media query/JavaScript script that will tell the browser to load a specific html file depending on the device or the browser width. Any tutorials anyone can point me to? Thank you in advance.

FS

**kirupa** · July 28th, 2012, 10:20 PM

Do you want this URL to replace the entire document or just load some HTML into a small region of your page?

**xFlashStudentx** · July 28th, 2012, 10:37 PM

I want to an entire document. For example, if the a user is viewing the site on a desktop or on a device with a width beyond 550, I want the desktop.html to load. If the user is viewing the site on a smartphone like the ipHone, I want iphone.html to load. I know this code needs to be the first script that runs, so the user can be directed to the appropriate page depending on what they are viewing the site on. Thanks!

**gamera** · July 29th, 2012, 07:05 AM

Try using window.matchMedia to detect and window.location to redirect.
Depending on the browsers you are targetting, you will need some kind of compatibily layer. http://caniuse.com/#search=matchmedia

**kirupa** · July 29th, 2012, 10:01 PM

+1 to what gamera said!

You can look at some alternative techniques to matchMedia I provide here: http://www.kirupa.com/html5/viewport...ument_size.htm