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

问题描述 投票:0回答:3

我想根据设备宽度(手机,平板电脑,个人电脑)更改下载链接我需要做什么?

<a href="url" onclick="function"; class="btn btn-primary js-scroll-trigger download">Download</a>
javascript html web
3个回答
4
投票

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>

1
投票

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

media queries

1
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.