Separate href URL für großen Bildschirm und kleinen Bildschirm Html

Question

Ich habe eine responsive Web-Anwendung. Für die Web-Ansicht habe ich die URL als

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

Aber für den kleinen Bildschirm muss ich die URL als

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

‚#toFocus‘ für focuzing Seite bestimmte Position mit der URL angehängt an kleine Geräte. Ich verwende den gleichen Code für kleine Bildschirme und große Bildschirme. Wenn ich den gleichen Code für einen großen Bildschirm einstelle, ist das Design kaputt gegangen. Gibt es eine Möglichkeit, separate URL für großen Bildschirm & kleinen Bildschirm getrennt zu setzen?

Answer 1

Sie müssen Javascript oder jQuery dafür verwenden.

Hier ist eine Lösung mit jQuery. Verwenden Sie $(window).width() und $(window).height(), um mit bzw. Höhe des Geräts zu erhalten, und verwenden Sie es, um einen Link mit jQuery attr hinzuzufügen.

var width = $(window).width(), height = $(window).height(); 
if ((width <= 1023) && (height >= 768)) { //or specific device width 
    jQuery('a').attr('href','#/mailbox/sent#toFocus'); 
} else { 
    jQuery('a').attr('href','#/mailbox/sent'); 
} 

Answer 2

Wenn Sie JQuery nicht verwenden möchten, können Sie CSS-Medienabfragen verwenden, um dies zu erreichen.

Etwas wie:

.mobile { 
 
    display: none; 
 
} 
 
@media screen and (max-width: 600px) { 
 
    .mobile { 
 
    display: block; 
 
    } 
 
    .desktop { 
 
    display: none; 
 
    } 
 
}

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

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

Answer 3

laufen diese nach DOM geladen wird. und überall die Adressen wie auf kleine Breite Geräten

$("a").each(function(i, v) { 
    if($(window).width() > 676) { 
    var chunks = $(this).href.split("#"); 
    chunks.pop(); 
    $(this).href = chunks.join("#"); 
    } 
});