Question

我正在画廊。我想向手机用户展示肖像头像，向其他所有人（平板电脑，笔记本电脑等）展示横向图片。

我目前拥有的是：

var maxW = window.screen.availWidth * window.devicePixelRatio;

if (maxW <= 767){
    galleryImages = portraitImages;
}else{
    galleryImages = landscapeImages;
};

var portraitImages = [  'https://static.photocdn.pt/images/articles/2016-7/landscape-comp/iStock_000058793850_Medium.jpg',
 'https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/12/2016/05/AP_Portrait_Landscapes_Stu_Meech-5.jpg',
 'https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/12/2016/05/AP_Portrait_Landscapes_Stu_Meech-16.jpg', 
'https://static.photocdn.pt/images/articles/2016-7/landscape-comp/iStock_000062009934_Medium.jpg']

var landscapeImages = ['https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjM3Njd9&w=1000&q=80', 
'https://images.unsplash.com/photo-1506260408121-e353d10b87c7?ixlib=rb-1.2.1&w=1000&q=80', 
'https://www.tom-archer.com/wp-content/uploads/2017/03/landscape-photography-tom-archer-4.jpg', 
'https://s.yimg.com/uu/api/res/1.2/DdytqdFTgtQuxVrHLDdmjQ--~B/aD03MTY7dz0xMDgwO3NtPTE7YXBwaWQ9eXRhY2h5b24-/https://media-mbst-pub-ue1.s3.amazonaws.com/creatr-uploaded-images/2019-11/7b5b5330-112b-11ea-a77f-7c019be7ecae', 
'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/hbx030117buzz14-1550595844.jpg']

现在，可以说，平板电脑的最小“分辨率”是768x1024。当我转到开发工具时，输入768x1024的分辨率并调用alert("MaxW: " + maxW + ",\nMaxH : " + maxH);，我得到的是MaxW：1536，MaxH：2048，这是由设备像素比率引起的。

所以，我的问题是，在考虑设备像素比的情况下，如何计算手机的最大屏幕尺寸。

我不能说“如果最大设备宽度为2048，则显示图片库”，因为某些计算机显示器的分辨率较差。

我希望我能理解我的意思。如果我可以提供任何其他信息/说明，请告诉我。

谢谢您的帮助。

Answer 1

使用窗口的innerWidth和innerHeight属性，您可以计算屏幕的宽度和高度（以像素为单位）。在我的2560x1600屏幕上，它返回尺寸1280x800，说明了设备像素比率。

function getWindowDimensions() {
  const width = window.innerWidth;
  const height = window.innerHeight;
  const ratio = (width / height) * 100;
  return { width, height, ratio };
}

const { width } = getWindowDimensions();

if (width < 768) {
    galleryImages = portraitImages;
} else {
    galleryImages = landscapeImages;
}

此外，除了使用JavaScript选择图像之外，您还可以使用<picture>元素并使用srcset属性。使用<picture>元素，您可以添加媒体查询，以根据该查询中的条件显示图像。这样一来，您便可以将图像集都添加到HTML，然后浏览器会根据您的查询确定要显示的图像。

<picture>
  <source media="(max-width: 767px)" srcset="portrait.jpg">
  <source media="(min-width: 768px)" srcset="landscape.jpg">
  <img src="landscape.jpg" alt="Your image description">
</picture>

我建议您为图像创建对，以将其添加到图片元素。例如，在具有键portrait和landscape的对象数组中。遍历数组，并为每个对创建一个<picture>元素，并为媒体查询指定<source>标签及其对应的srcset值。

const images = [
  {
    portrait: './portrait-image-1.jpg',
    landscape: './landscape-image-1.jpg'
  },
  {
    portrait: './portrait-image-2.jpg',
    landscape: './landscape-image-2.jpg'
  },
  {
    portrait: './portrait-image-3.jpg',
    landscape: './landscape-image-3.jpg'
  }
];

for (const { portrait, landscape } of images) {

  const picture = document.createElement('picture');
  const sourcePortrait = document.createElement('source');
  const sourceLandscape = document.createElement('source');
  const image = document.createElement('img');

  sourcePortrait.media = '(max-width: 767px)';
  sourcePortrait.srcset = portrait;
  sourceLandscape.media = '(min-width: 768px)';
  sourceLandscape.srcset = landscape;
  image.src = landscape;

  picture.append(sourcePortrait, sourceLandscape, image);
  document.body.append(picture);

}

否则，将检测某人正在使用的设备（例如手机），然后检测check the userAgent for keywords，这些设备被识别为电话。对于检测设备而言，这很好，但是对于响应性的Web开发而言，增加的其他设备和新的浏览器不多，并且将来可能会中断。

Answer 2

您为什么要假设portrait = phone和landscape = tablet？我可以（可能还会去画廊）在风景中使用我的手机。

而不是假设设备类型是什么，而是检查屏幕现在实际在做什么，即屏幕是横向还是纵向，然后相应地配置软件。

然后，无论使用哪种设备，无论使用什么方向，它都可以工作。

如何通过screen.availWidth（而不是平板电脑，笔记本电脑等）准确地检测手机

2 个答案: