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

Question

我想根据设备宽度（手机，平板电脑，个人电脑）更改下载链接我需要做什么？

<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个锚标签，使用qazxsw poi宽度一次只显示1个

media queries

Answer 3

您甚至无需使用JavaScript即可完成。

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

完全是为这类事物而设计的。你制作3个独立的CSS Media Queries标签，并根据媒体查询在<a>或display:inline之间交替。例如，在移动屏幕上，桌面和平板电脑链接都将设置为display:none，而移动链接将设置为display:none。

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

HTML：

display:inline

JavaScript的：

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

您可能需要更改断点（1024px，768px）我刚刚使用了这个例子中的顶点。