Different Design Desktop/mobile Devices

I hope there is an answer for this question. I'm not good at codeing and I hope someone will understand my question. Is there any way to have 2 different designs.. I have a desig

Solution 1:

The best practice would be to use a responsive html + css. That would automatically restyle the page based on the device type or screen size. But if you prefer to do it this way, you can do it like this:

In the header of index.html (before any styles or scripts) you can filter the device that is currently opening the page and forward the user to the mobile html (if he's coming from a mobile device).

<script>if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   window.location.href = 'mobile.html';
}
</script>

Hope it helps.

Solution 2:

The following javascript code will be useful:

functionadjustStyle() {
    var width = 0;

    //getting width of webpageif (window.innerHeight) {
        width = window.innerWidth
    } elseif (document.documentElement && document.documentElement.clientHeight) {
        width = document.documentElement.clientWidth;
    } elseif (document.body) {
        width = document.body.clientWidth;
    }

    //loading css if width less than 600. Make sure your link tag has id  "myCSS"if (width < 600) {
        document.getElementById("myCSS").setAttribute("href", "css/mobile.css")
    } else {
        document.getElementById("myCSS").setAttribute("href", "css/desktop.css")
    }
}

//calling the functionwindow.onresize = function () {
    adjustStyle();
}