html - 大屏和小屏Html分开href url

Question

我有一个响应式网络应用程序。对于 WebView ，我的 url 为

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

但对于小屏幕，我需要 url 作为

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

'#toFocus' 附加了用于在小型设备上将页面聚焦到特定位置的 url。我对小屏幕和大屏幕使用相同的代码。如果我将相同的代码用于大屏幕，设计就会崩溃。有什么办法可以分别为大屏幕和小屏幕放置单独的 url 吗？

Answer 1

你必须为此使用 javascript 或 jQuery。

这是一个使用 jQuery 的解决方案。使用$(window).width()和$(window).height()分别获取设备的宽度和高度，并使用它来使用jQuery添加链接属性。

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