基于屏幕尺寸的功能

Question

onClick on 按钮弹出注册表单。问题是我只需要在屏幕尺寸为 1440px 或更大时才需要这样做。

   <a href="#" class="button"onmousedown="viewForm()">start</a>

   function viewForm(){
        document.getElementById("form").style.display = "block";
    };

Answer 1

您可以使用 window.resize event.Try 调整您的大小 window 您会看到另一个元素 visible.Hope 它有帮助。

function reportWindowSize() {
  console.log(window.innerWidth)
  if (window.innerWidth >= 1440) {
    document.getElementById("a").style.display = "block"
    document.getElementById("form").style.display = "block";
  }
  // just for test my pc has small screen
  else if (window.innerWidth <= 500) {
    document.getElementById("b").style.display = "block"
  }
}

function viewForm() {
  document.getElementById("form").style.display = "block";
};

window.onresize = reportWindowSize;

<a href="#" id="a" class="button" onmousedown="viewForm()" style="display:none">start</a>

<a href="#" id="b" class="button" onmousedown="viewForm()" style="display:none">ENDIT</a>

<form id="form"><input type="text"></form>

Answer 2

您可以通过多种方式阅读 window 大小（请在此处查看 Device and Viewport Size In JavaScript

所以像这样的东西应该可以工作：

<a href="#" class="button"onmousedown="viewForm()">start</a>

function viewForm(){
    if (window.innerWidth >= 1440 ) {
        document.getElementById("form").style.display = "block";
    }
};

也许你不需要所有这些，你可以简单地用 CSS 媒体查询隐藏 link，这取决于你想做什么。

Answer 3

没有jQuery:

function viewForm(){
  if (window.innerWidth >= 1440) {
    document.getElementById("form").style.display = "block";
  }
};

请注意，如果用户减小 window 的大小，您的表单即使低于 1440 也会保持可见。您可能还需要检查 resize 事件。

你可以这样更新上面的函数：

function viewForm(){
  if (window.innerWidth > 1440) {
    document.getElementById("form").style.display = "block";
  } else {
    document.getElementById("form").style.display = "none";
  }
};

window.addEventListener('resize', viewForm);

基于屏幕尺寸的功能

function based on screen size

javascript

media-queries