Как оформить кнопку в зависимости от ширины экрана

Question

Я хочу закодировать кнопку реагирования на размер экрана, которая изменит размер в соответствии с размером экрана в Javascript.Я могу сделать это в css3, но мне нужна кодировка Javascript.

Answer 1

Я не знаю, почему вы предпочитаете js вместо css, но вы можете сделать это так:

// lets say your button's id is btn
var btn = document.getElementById('btn');
btn.style.width = window.innerWidth + 'px';

window.addEventListener("resize", function(event) {
  btn.style.width = window.innerWidth + 'px';
}, false);

Answer 2

Я использовал navigator.userAgent для определения браузера, если он вам помогает

Чтобы получить высоту экрана, ширину, вы можете использовать:

screen.availWidth screen.availHeight

или

window.innerWidth <- но это зависит от размера окна </p>

function isMobile() {
  return (/Android|webOS|iPhone|iPad/i.test(navigator.userAgent));
}

function loadScript(url) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  head.appendChild(script);
}

if (isMobile()) {
  console.log("mobile");
} else {
  console.log("desktop");
}