Question

我想根据设备宽度（移动设备，平板电脑，个人计算机）更改下载链接，我需要什么js来完成此操作？

<a href="url" onclick="function"; class="btn btn-primary js-scroll-trigger download">Download</a>

Answer 1

在this答案中，您了解到有很多方法可以在js中获取设备宽度。最好的一种是下面的一种：

const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

因此，您可以执行以下操作（调整窗口大小以测试是否较小）：

var a_element;

function changeHref() {
    const mq = window.matchMedia( "(min-width: 500px)" );
    a_element = document.querySelector(".download");
        
    if (mq.matches)
        a_element.href = "http://www.google.com";
    else
        a_element.href = "http://www.duckgogo.com";

}
changeHref();
console.log(a_element.href);

<a href="url" onclick="function"; class="btn btn-primary js-scroll-trigger download">Download</a>

Answer 2

在JavaScript中不要使用宽度。有3个定位标记，使用media queries宽度一次只能显示1个

<a onclick="function1()"; class="showOnDesktopOnlyUsingMediaQuery">Download Desktop</a>
<a onclick="function2()"; class="showOnTabletOnlyUsingMediaQuery">Download Tablet</a>
<a onclick="function3()"; class="showOnMobileOnlyUsingMediaQuery">Download Mobile</a>

Answer 3

即使不使用JavaScript，也可以完成任务。 CSS Media Queries正是针对此类事物而设计的。您制作3个单独的<a>标签，并根据媒体查询在display:inline或display:none之间进行切换。例如，在移动屏幕上，台式机和平板电脑链接都将被设置为display:none，而移动链接将被设置为display:inline。

但是，如果您确实需要使用JS，则可以执行以下操作。

HTML：

 <a href="#" id="link-change" class="btn btn-primary js-scroll-trigger download">Download</a>

JavaScript：

var link = document.getElementById("link-change");

var mobile = "url-mobile";
var tablet = "url-tablet";
var desktop = "url-desktop";

link.onclick = function(){
   if(screen.width < 768){
      link.href = mobile;
   } else if(screen.width < 1024){
      link.href = tablet;
   } else {
      link.href = desktop;
   }
}

您可能需要更改断点（1024像素，768像素），在本示例中，我只是使用了断点。

如何根据设备宽度更改下载按钮的href和onclick功能

3 个答案: