3

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

Since my second page is a little complex 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 complex 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
  • 729
  • 1
  • 7
  • 18
  • Welcome to Stack Overflow. It's recommended 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 Dec 05 '16 at 18:52
  • Please review [ask]. – Fencer04 Dec 05 '16 at 20:17
  • Look at the @media tag of css : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – osmanraifgunes Dec 05 '16 at 23:35
  • Are you able to modify your htaccess? That is if you're using apache to host this site ? – Xedecimal Dec 09 '16 at 02:31
  • Thank you for the responses. It is complex 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 Dec 11 '16 at 12:32
  • Do you want an entirely different structure or just different styling? – Jack Dec 11 '16 at 13:18

1 Answers1

5

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';
}
Barry127
  • 1,212
  • 1
  • 12
  • 23
  • Thank you so much!! :D I was looking for something of this kind! Also, can we do this for desired widths? – Kruthika C S Dec 11 '16 at 15:50
  • You can use the same kind of check for the width. check [this](http://stackoverflow.com/questions/5484578/how-to-get-document-height-and-width-without-using-jquery) SO answer on how to get the document width. – Barry127 Dec 11 '16 at 19:14
  • Thank you so much @Barry :) :) – Kruthika C S Dec 12 '16 at 17:52