CODEWITHSUNDEEP
javascriptjqueryhtmlcssresponsiveness
Kruthika C S
Kruthika C S

Reputation: 739

Render a different html page for requests from mobile device using only html css and js

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?

Upvotes: 3

Views: 4078

Answers (1)

Barry127
Barry127

Reputation: 1212

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';
}

Upvotes: 6

Related Questions