Tips on precisely identifying a mobile phone using screen.availWidth without mistaking it for a tablet or a laptop

Question

Tips on precisely identifying a mobile phone using screen.availWidth without mistaking it for a tablet or a laptop

I am currently developing a gallery feature where I want to display portrait-oriented images to mobile phone users and landscape-oriented images to other devices like tablets and laptops.

Here is what I have so far:

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

Now, assuming the smallest resolution for tablets is 768x1024. When I input 768x1024 in the Dev Tools resolution and run

alert("MaxW: " + maxW + ",\nMaxH : " + maxH);

, I receive MaxW: 1536, MaxH: 2048 due to the device-pixel ratio.

My question is, how can I accurately calculate the maximum screen size for a mobile phone, taking into account the device-pixel ratio?

I cannot simply use "show picture gallery if max-device width is 2048" because some computer monitors have lower resolutions.

I hope I have explained my query clearly. Please let me know if you need any more information or clarification.

Thank you for your assistance.

javascript mobile

Answer 1

Answer №1

Utilizing the innerWidth and innerHeight properties of the window allows for the calculation of the screen width and height in pixels. On a screen with dimensions of 2560x1600, it returns the adjusted dimensions of 1280x800, factoring in the device-pixel ratio.

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

Alternatively, instead of selecting images using JavaScript, the <picture> element with the srcset attribute can be utilized. By utilizing the <picture> element, media queries can be added to display images based on specific conditions set within those queries. This allows for inclusion of multiple image sets in the HTML, with the browser determining which image to display based on the query.

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

A recommended approach would be to create pairs for images within an array of objects, containing keys such as portrait and landscape. By iterating over the array, a <picture> element can be created for each pair, with corresponding <source> tags set to the appropriate media query and srcset value.

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

}

For device detection, such as identifying a mobile phone, checking the userAgent for specific keywords associated with phones is a viable option. While this method works well for device detection, it may not be as effective for responsive web development as new devices and browsers could be introduced in the future, potentially causing issues.

Answer 2

Utilizing the innerWidth and innerHeight properties of the window allows for the calculation of the screen width and height in pixels. On a screen with dimensions of 2560x1600, it returns the adjusted dimensions of 1280x800, factoring in the device-pixel ratio.

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

Alternatively, instead of selecting images using JavaScript, the <picture> element with the srcset attribute can be utilized. By utilizing the <picture> element, media queries can be added to display images based on specific conditions set within those queries. This allows for inclusion of multiple image sets in the HTML, with the browser determining which image to display based on the query.

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

A recommended approach would be to create pairs for images within an array of objects, containing keys such as portrait and landscape. By iterating over the array, a <picture> element can be created for each pair, with corresponding <source> tags set to the appropriate media query and srcset value.

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

}

For device detection, such as identifying a mobile phone, checking the userAgent for specific keywords associated with phones is a viable option. While this method works well for device detection, it may not be as effective for responsive web development as new devices and browsers could be introduced in the future, potentially causing issues.

Answer 3

Answer №2

Is it necessary to assume that portrait mode equals phone and landscape mode equals tablet? I could very well be using my phone in landscape mode, especially when viewing a gallery.

Instead of jumping to conclusions about the device type, take a moment to determine the screen orientation in real-time. Adjust your software settings based on whether the screen is in landscape or portrait mode for maximum compatibility.

By doing so, your software will function seamlessly regardless of the device or orientation being used.

Answer 4

Is it necessary to assume that portrait mode equals phone and landscape mode equals tablet? I could very well be using my phone in landscape mode, especially when viewing a gallery.

Instead of jumping to conclusions about the device type, take a moment to determine the screen orientation in real-time. Adjust your software settings based on whether the screen is in landscape or portrait mode for maximum compatibility.

By doing so, your software will function seamlessly regardless of the device or orientation being used.

Tips on precisely identifying a mobile phone using screen.availWidth without mistaking it for a tablet or a laptop

Answer №1

Answer №2

Similar questions

Making if-else statements easier

Controlling the Escape Key and Clicking Outside the Material-ui Dialog Box

Why isn't my watch function functioning properly within Vue?

Why doesn't WebStorm display TypeScript inspection errors in real-time?

Steps for updating information in Firebase version 9

Storing JSON information within a variable

What could be causing the malfunction of my Nextjs Route Interception Modal?

The link in the drop down select is not functioning in IE8/9. When trying to open the drop down select link, an

How can you correctly make an Ajax request using computed properties sourced from VueX Store?

Tips on enclosing <li> elements within <ul> tags

Adjusting the size of all elements on a webpage

Is it possible to reset the existing localStorage value if we access the same URL on a separate window?

Navigating through scroll bars in Reactjs

In my app.post request in node.js and express, the body object is nowhere to be found

How to add suspense and implement lazy loading for a modal using Material-UI

Trouble with Google Interactive Charts failing to load after UpdatePanel refresh

Tips on how to properly handle Promises in a constructor function

How to Stop AJAX Requests Mid-Flight with JQuery's .ajax?

Knockout Mapping is causing a complete re-render of all elements

unable to attach picture to the img element