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

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。当我进入Dev工具时，以分辨率输入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元素和srcset属性，而不是在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？我可以(也可能是为了画廊)在景观中使用我的手机。

与其假设设备的类型，不如检查屏幕现在实际在做什么(即屏幕景观或肖像)，然后相应地配置软件。

然后，它将工作，无论是什么设备，无论什么方向。