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

Question

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

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

Answer 1

In this answer you learn that there are many method of obtaining the device width in js. One of the best them is the one below:

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

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

So you can do something like (resize window to test for small size):

 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

Dont use width in javascript. Have 3 anchor tags, show only 1 at once using media queries width

<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

You can accomplish without even using JavaScript. CSS Media Queries are designed exactly for this type of thing. You make 3 separate <a> tags, and alternate between display:inline or display:none based on the media queries. For example, on a mobile screen, both the desktop and tablet links will be set to display:none while the mobile link will be set to display:inline .

But if you really need to use JS though, you can do something like the following.

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;
   }
}

You may need to change the breakpoints (1024px, 768px) I just used those off the top of my head for this example.