I want to render my second HTML page differently for mobile devices and desktop devices.

Since my second page is a little plex so I have decided to render two different sites.

How do I achieve this using HTML, CSS and JS only?

Edit1 - Thank you for the responses. It is plex to use media queries for this page. So, I am designing a new page just for mobile sites. The question is, from my first page, based on the width of the device, can I render this different page. I have created a route for this page in the repository and the URL is ready.. So, based on the width, onclick of a button in first page, I should go to a site X if it's width is more than Xpx else site Y. It is straight forward. How do I do this in JS?

I want to render my second HTML page differently for mobile devices and desktop devices.

Since my second page is a little plex so I have decided to render two different sites.

How do I achieve this using HTML, CSS and JS only?

Edit1 - Thank you for the responses. It is plex to use media queries for this page. So, I am designing a new page just for mobile sites. The question is, from my first page, based on the width of the device, can I render this different page. I have created a route for this page in the repository and the URL is ready.. So, based on the width, onclick of a button in first page, I should go to a site X if it's width is more than Xpx else site Y. It is straight forward. How do I do this in JS?

• javascript
• jquery
• html
• css
• responsiveness

Share Improve this question Follow edited Dec 11, 2016 at 12:36 Kruthika C S asked Dec 5, 2016 at 18:44 Kruthika C SKruthika C S 73911 gold badge77 silver badges1919 bronze badges 6

• Wele to Stack Overflow. It's remended that you should post the code you have so far (or snippets of relevant code if it is excessive) to give people something to work with. – Darren H Commented Dec 5, 2016 at 18:52
• Please review How to Ask. – Fencer04 Commented Dec 5, 2016 at 20:17
• Look at the @media tag of css : developer.mozilla/en-US/docs/Web/CSS/Media_Queries/… – osmanraifgunes Commented Dec 5, 2016 at 23:35
• Are you able to modify your htaccess? That is if you're using apache to host this site ? – Xedecimal Commented Dec 9, 2016 at 2:31
• Thank you for the responses. It is plex to use media queries for this page. So, I am designing a new page just for mobile sites. The question is, from my first page, based on the width of the device, can I render this different page. I have created a route for this page in the repository and the URL is ready.. So, based on the width, onclick of a button in first page, I should go to a site X if it's width is more than Xpx else site Y. It is straight forward. How do I do this in JS? – Kruthika C S Commented Dec 11, 2016 at 12:32

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

have a look at Mobile Detect.

You could use it like this:

var md = new MobileDetect(window.navigator.userAgent);
if (md.mobile() || md.tablet()) {
    document.location.href = 'mobile-page.html';
}