How can I open another file index.html, depending on the width of the screen?

Question

Here's my problem.

I've got finished page (html + css + js), but I want to do a mobile version, with other html files, another index.html and css file. What do I need to add the code to the main page, that when i open site on device with screen width less than 800 pixels it will launching the mobile version?

Answer 1

It may not be the answer you want, however this script will re-direct the user if they are utilizing a touch screen device (ie Phone, tablet)

<script>
    if( 'ontouchstart' in window ){
        window.location = 'mobile/index.html';
    }
</script>

Answer 2

Put this in your onload:

if(window.innerWidth < 800{
    window.location = '/m/index.html';
}

or (this is as cross-browser)

if(window.screen.width < 800{
    window.location = '/m/index.html';
}

Answer 3

Create your mobile version on subdomain or subfolder and add JavaScript mobile user detection and redirect them to mobile page

https://github.com/sebarmeli/JS-Redirection-Mobile-Site