Question

我希望能够根据窗口宽度来更改href：在初始页面加载和窗口调整大小时（不使用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不会更改。如果您希望此链接随 window 的宽度动态变化，则需要window.innerWidth或window.outerWidth。

如果要动态更改此内容，则不能只执行一次，而是需要监视窗口大小的更改。

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）

2 个答案: