根据视口大小更改 href（没有 jquery）

Question

我希望能够根据 window 宽度更改 href：在初始页面加载和 window 调整大小（没有 jquery 或其他外部库）。谢谢！

这是一个使用类似问题的答案的实验：似乎对我不起作用。 https://codepen.io/marcusdeacey/pen/wLLNXb

HTML

<a id="myLink" href="http://highresolutionurl">My Link</a>

JS

if (screen.width < 768) {
    document.getElementById('myLink').setAttribute('href', "http://highresolutionurl");
}
else if {
    document.getElementById('myLink').setAttribute('href', "http://lowresolutionurl");
}

Answer 1

有一个名为 screen.width 的 JavaScript 变量，它很容易解释，它获取屏幕宽度。例如：

if (screen.height > screen.width) {
  //This means your on a mobile device so if you wanted people on mobile to go to mobile support instead of desktop support you could use this method
}
else {
  //do something
}
//or you could just
if (screen.width == 1360) {
  //Do this for people with only 1360 pixel wide screens
}
else {
  //Do this for people without 1360 pixel screens
}

Answer 2

除非您更改计算机或移动设备上的显示设置，否则

screen.width 不会更改。如果你想让这个 link 随 window 的宽度动态变化，你需要 window.innerWidth 或 window.outerWidth.

如果你想让这个动态变化，你不能只做一次，你需要监控window大小的变化。

var myLink = document.getElementById('myLink');

function setLink() {
  if (window.innerWidth < 768) {
    myLink.setAttribute('href', "http://highresolutionurl");
  }
  else {
    myLink.setAttribute('href', "http://lowresolutionurl");
  }
}

setLink();

window.addEventListener('resize', setLink);

根据视口大小更改 href（没有 jquery）

Change href depending on viewport size (without jquery)

javascript

viewport