CODEWITHSUNDEEP
javascripthtmlcss
Ispeeta
Ispeeta

Reputation: 21

Can a Website Go to Different Hyperlinks According to Device?

On Canva (a graphic designer site), you can create your own websites easily and get the link for it and everything. This is very helpful for me as I constantly put out new content for social issues around the world, so this makes it easier to just make it look already good without having to do CSS.

However, Canva has two options, either a laptop only responsive design or a phone-first responsive design. I was thinking, what if I created both and depending on what device you are in (either laptop or phone), it takes you to that specific site? Is this possible to do?

https://www.canva.com/design/DAEAv3UwPN0/sQ3gyqHwuiMfLJZn19o5yw/view?website#1:an-example-site-from-canva (laptop)

https://www.canva.com/design/DAEAv3ciA4Y/fxQc100hivGOOQqTO6kbGg/view?website#1:1 (phone)

This is the simple I use to link to the specific page: <li><a class="link" href="Campaigns/example-site-here">Campaigns</a></li>

Please let me know! Thank you

Upvotes: 0

Views: 43

Answers (2)

Seabyte
Seabyte

Reputation: 390

You could check that like this:

if(window.outerWidth < 800) {
   window.location.href = "/url_for_mobile";
} else {
   window.location.href = "/url_for_pc";
}

and just put that in a function for a click event.

Upvotes: 1

Dennishofken
Dennishofken

Reputation: 317

What you are trying to do is kind of unusual since most designers use only one html file and then add different styles depending on the screen size. If you really want to use 2 separate html files you're going to have to dynamically generate link tags when loading or resizing the page.

This is perfectly possible, but what happens when a user resizes his browser after clicking on the link? He is now looking at the webpage optimized for the wrong screen size. This will force you to redirect users to the second page when they resize their window.

For short: You're better off using media queries in css and thus only using one html file.

Upvotes: 2

Related Questions