I am working on a project. I'm cloning a websiteMake My Trip
https://www.makemytrip.com/
This website looks different on laptops and phones, and I mean completely different. So how do we implement such a function.
This is the view on the laptop
The same website on mobile
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The comprehensive answer depends on many factors that have not yet been disclosed. For example are you using a server side language like PHP and are all/most pages different?
Detecting whether a website runs on mobile devices is not simple.
One solution is
Have a common index page, use JavaScript to get the screen size, and use Ajax to load the real mobile device page or desktop page
Add a button/link to the page that allows the user to switch between mobile and desktop and saves the selection in a cookie/session.
Another option
I've seen some sites do this. A mobile version is always available by default and allows users to switch to desktop mode. The assumption here is that more people are using mobile devices, so the default setting will be correct for most people, and showing a smaller page on desktop is not as bad as showing a larger page on mobile .