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

我在画廊工作。我想向手机用户展示肖像图片，向其他人（平板电脑、笔记本电脑等）展示风景图片

我目前拥有的是：

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']

var maxW=window.screen.availWidth*window.devicePixelRatio；
如果（maxW使用窗口的
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;
}

我建议您为图像创建一对，以便将添加到picture元素中。例如，在具有键
纵向
和
横向
的对象数组中。在数组上循环，并使用媒体查询中指定的
标记及其相应的为每对图像创建一个
元素e> 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);

}

---

否则，检测某人正在使用的设备（如移动电话）就会被识别为电话。对于检测设备来说，这很好，但对于响应式web开发，可能添加的其他设备和新浏览器数量会减少，并且将来可能会中断。

为什么假设纵向=电话和横向=表格我可以（也可能是画廊）在风景区使用我的手机

与其对设备类型做出假设，不如检查屏幕现在实际在做什么，即屏幕的横向或纵向，然后相应地配置软件

---

然后，不管是什么设备，不管是什么方向，它都会工作。

这回答了你的问题吗？我必须先试用一下，但这可以解决问题。我不明白

/Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini/

如何适应环境，因为到目前为止我还没有看到任何这样编写的代码。他说y、 感谢您的回复。我已经查看了

图片

，

scrset

等，但问题是，我有一个数组，我不知道这将如何协同工作。添加数组（如果数组很长，只显示前几个）对于你上面的问题，我会看看我能做些什么。这些目前只是占位符图像。谢谢你的帮助！非常感谢=）你明白了，伙计。还有几个问题。肖像和风景照片是同一张照片，但方向不同吗？您是否使用后端语言来呈现HTML，如PHP或Node.js，并且图像是否在后端可用，例如：在数据库中？或者你只是在前端JavaScript中有一些URL并从那里渲染你的图像吗？是的，纵向和横向照片是相同的（但比例不同）。没有后端，html（js）直接从不同的网站拍摄图片。我想那是因为我忘记了什么。

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);

}