Question

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

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

但对于小屏幕我需要网址

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

'＃toFocus'附加了用于将页面聚焦到小型设备上的特定位置的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

如果您不想使用JQuery，可以使用CSS媒体查询来实现此目的。

类似的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

在加载DOM后运行此命令。并在任何地方使用像小宽度设备上的地址

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

为大屏幕和小屏幕Html分隔href网址

3 个答案: