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

Posted 2021-03-31

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

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

答案

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

另一答案

不要在javascript中使用宽度。有3个锚标签，使用qazxsw poi宽度一次只显示1个

media queries

另一答案

您甚至无需使用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）我刚刚使用了这个例子中的顶点。

以上是关于如何根据设备宽度更改下载按钮的href和onclick功能的主要内容，如果未能解决你的问题，请参考以下文章

基于尺寸元素的设备旋转期间的动画更改将在旋转完成后进行

如何更改iOS自定义键盘的高度？

如何根据视口宽度使用 Tailwind CSS 更改部分类的布局？

更改按钮文本时如何自动更改 QPushButton 宽度和 QMenuBar 角小部件宽度？

如何根据设备的分辨率更改样式？

如何更改 UIAlertView 按钮的宽度？