Как изменить функцию href и onclick кнопки загрузки в зависимости от ширины устройства

Question

Я хочу изменить ссылку на скачивание в зависимости от ширины устройства (мобильный, планшетный компьютер, ПК). Какие js мне понадобятся для этого?

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

Answer 1

В этом ответе вы узнаете, что существует множество способов получения ширины устройства в 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. 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;
   }
}

Возможно, вам придется изменить точки останова (1024px, 768px), которые я только что использовалдля этого примера.

Answer 3

Не используйте ширину в JavaScript.Имеют 3 тега привязки, показывают только 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>