分开用于大屏幕和小屏幕HTML的HREF URL

Question

我有一个响应式Web应用程序。对于Web视图，我的URL为

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

但是对于小屏幕，我需要URL为

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

'＃tofocus'附加了URL，以将页面聚焦到小设备上的特定位置。我正在为小屏幕和大屏幕使用相同的代码。如果我为大屏幕放置了相同的代码，则设计会破坏。是否有任何方法可以将单独的URL用于大屏幕＆amp;小屏幕分开？

Answer 1

您必须使用javascript或jquery。

这是使用jQuery的解决方案。使用$(window).width()和$(window).height()分别使用设备的高度，并使用它使用JQuery attr添加链接。

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

在加载DOM后运行此操作。并在各处使用小宽度设备的地址

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

Answer 3

如果您不想使用jQuery，则可以使用CSS媒体查询来实现这一目标。

类似：

.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>