Code to show screen resolution

Question

I’m testing the site I’m creating on several devices to see the responsiveness, because I have 5 css one for each screen resolution and would like to create a code within a div that shows the resolution of the device. The information that manufacturers pass on from the devices seems not to be what it really is. When my site loaded on my device, this div with the code would inform me the screen resolution, so I can see where I should change because, I use several css, depending on the resolution. I know this is possible via js, I just don’t know how to do :)

Answer 1

Object screen

I believe you’re searching for the object screen in javascript. It gives you the screen resolution where the window is.

// escrevendo a resulução no console
console.log('Total width/height: ' + screen.width + 'x' + screen.height);
// escrevendo dentro de um div
document.getElementById('idDoDivQueMostraResolucao').innerHTML = 'Total width/height: ' + screen.width + 'x' + screen.height;

Media Query

However, you don’t need to use this, you can put the call media query in CSS itself. This approach also has the advantage of working when the user is javascript disabled. So you won’t need a CSS file for each resolution either.

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Responsive images

For images, there are still other modes, introduced in HTML5, which do not use CSS or Javascript, leaving everything to the browser.

srcset and sizes

The new tag attributes img, srcset and sizes, are used by the browser to select the best image depending on the resolution. In the example below, the browser downloads only the image that best fits a given scenario:

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
           800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

With these attributes in place, the browser will:

• Observe the width of your device (screen).
• Find what media condition in the size list (atributo sizes) is the first to be true.
• Observe the size of the slot provided with this media query.
• Load the referenced image into the srcset list that best matches the chosen size.

picture

This tag is used, for example, in cases where an image looks good on the desktop in landscape mode, but on a mobile phone in portrait mode is not cool. Here you create another image for portrait mode that looks better.

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

In older browsers, new attributes and tags are just ignored.

More information

• https://www.w3schools.com/jsref/prop_screen_width.asp
• https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
• https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

Answer 2

You can get the screen resolution with window.innerWidth, and play that value within the div with:

document.querySelector("#resolucao").innerHTML = window.innerWidth;

document.querySelector("#resolucao").innerHTML = window.innerWidth;

<div id="resolucao"></div>

Answer 3

With jquery

With this solution in addition to grabbing the width of the device will load the appropriate CSS

Library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Script

function adjustStyle(width) {

  //largura do dispositivo
  width = parseInt(width);
  //imprime a largura na div de id sizeWidth
  $( "#sizeWidth" ).text(width);

  //apenas um exemplo
  if (width < 701) {
    $("#size-stylesheet").attr("href", "style700.css");
  } else if (width < 900) {
    $("#size-stylesheet").attr("href", "style900.css");
  } else {
     $("#size-stylesheet").attr("href", "styleMaior900.css"); 
  }
}

$(function() {
  adjustStyle($(this).width());
  $(window).resize(function() {
    adjustStyle($(this).width());
  });
});

HTML

<link id="size-stylesheet" rel="stylesheet" type="text/css" href="" />
<div id="sizeWidth"></div>