Sulu.MeanStack Sulu.MeanStack - 1 year ago 99
CSS Question

Seperate href url for large screen and small screen Html

I have a responsive web application. For the web view I have the url as

<a href="#/mailbox/sent">Sent Mail</a>

But for the small screen I need the url as

<a href="#/mailbox/sent#toFocus"> Sent Mail</a>

'#toFocus' is appended with the url for focuzing the page to particular position on small devices. I am using the same code for small screen and large screens. If I put the same code for large screen, design got broke down. Is there is any way to put seperate url for large screen & small screen seperately?

Answer Source

You have to use javascript or jQuery for this.

Here is a solution using jQuery. use $(window).width() and $(window).height() to get with and height of the device respectively , and use it to add link using jQuery attr.

var width = $(window).width(), height = $(window).height();
if ((width <= 1023) && (height >= 768)) {  //or specific device width 
} else {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download