获取屏幕尺寸以选择匹配 header 图片

Question

嘿，我有一个 JavaScript 检查屏幕尺寸和选择匹配图片的解决方案。但不幸的是我把这个弄丢了。

我的问题：我想选择一张关于屏幕尺寸的header图片（CSS无法响应）。分辨率为 1920x1080 的访客将看到与此尺寸匹配的图片。对于通常的尺寸，我将制作特殊的 header 图片。

当访客 JavaScript 禁用时，他应该看到标准图片。

移动设备有自己的header。

有谁能帮帮忙……谢谢:)

最好的问候马德琳

Answer 1

您有多种查看屏幕尺寸的方法：

如果您正在使用 jQuery，您可以按以下方式使用屏幕 object：

screen.width;

您还可以使用以下方法获取 window 或文档的大小：

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

这里是纯JavaScript:

的跨浏览器解决方案

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

关于 不使用媒体查询的响应式图像，Flexbox 是一个很好的解决方案：

body { margin: 0; background: #333; }
header { 
  padding: .5vw;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}
header div { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: 200px; 
  margin: .5vw; 
}
header div img { 
  width: 100%; 
  height: auto; 
}

<header>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-4.jpg" alt></div>
<div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-5.jpg" alt></div>
</header>

调整此 Codepen 的大小以查看 Flexbox 响应式 Header

如果您 header 图像设置为 background image 您可以设置：

background-size: contain

background-size: cover

希望对您有所帮助。

Answer 2

如果您正在使用 jQuery，您可以检查屏幕大小（当文档结构准备就绪时）并相应地显示您想要的图像：

$(document).ready(function() {

  if ($(window).width() < 960) {
     $('selector').css({'background-image':'url(images/small-
  image.jpg)'});

  }
  else {
     $('selector').css({'background-image':'url(images/big-image.jpg)'});
  }

});

获取屏幕尺寸以选择匹配 header 图片

Get screen size to choose matching header picture

javascript

arrays

sniffer