Se você trabalha em um projeto que precisa ser visto em todos os dispositivos, você precisará ir muito além das Media Queries. Um passo adiante será detectar o tamanho da tela do usuário e também o tamanho da janela usada pelo usuário.

Note que os dois são bem diferentes. Enquanto o usuário está em um desktop, ele pode modificar o tamanho da janela do browser e consequentemente isso irá alterar o breakpoint da página. Se você faz um layout responsivo, ele verá o layout se adaptando enquanto faz o redimensionamento da página. Embora ele esteja modificando o tamanho da janela, o tamanho da tela (baseada PPI – Points Per Inch – da tela) dele não é modificada.

Você pode usar as duas ocasiões para fazer mudanças no layout ou no funcionamento da página de acordo com o tamanho da janela ou o tamanho da tela. Abaixo, veja um código bem básico, onde você consegue recuperar esses valores:

Javascript

function sizeOfThings(){
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  
  var screenWidth = screen.width;
  var screenHeight = screen.height;
  
  document.querySelector('.window-size').innerHTML = windowWidth + 'x' + windowHeight;
  document.querySelector('.screen-size').innerHTML = screenWidth + 'x' + screenHeight;

};
sizeOfThings();

window.addEventListener('resize', function(){
	sizeOfThings();
});

CSS

<h3>Window size is <span class="window-size"></span></h3>
<p>Knowing this number you can make decisions based in breakpoints of window.</p>
<hr>
<h3>Screen size is <span class="screen-size"></span></h3>
<p>Here you have an idea of device screen size. </p>

Redimensionando a janela, os valores mudam e você conhece o tamanho da janela. Para que os valores da tela mudem, modifique a resolução do seu computador e faça um refresh na página. Perceba aqui que no Desktop, ele mostra a resolução que você colocou – que na verdade é uma emulação, caso a tela tivesse uma quantidade de pontos por polegada menor do que ela realmente tem.

Mas até aqui estamos testando isso em um Desktop. Quando testamos isso em um iPhone, que tem densidade de pixels diferente de desktops e toda aquela história, ele vai mostrar o valor real de PPI, que é o valor original da tela do iPhone, sem contar com o valor dobrado da tela retina. Nesse caso, em um iPhone 6, ficaria mais ou menos como a imagem abaixo:

E agora em um iPad Air:

Como as janelas dos browsers em mobiles são sempre maximizadas, muito dificilmente elas serão muito menores que o tamanho da tela do aparelho.

Tendo esses valores, você consegue pelo menos ter uma ideia do tamanho do dispositivo que o usuário tem usado. Vai, pelo menos, saber em qual categoria ergonômica ele se encaixa e então tomar decisões de layout e funcionalidades mais adequadas ao projeto.

Com isso as Media Queries do CSS funcionam se baseando no tamanho da janela do browser e não no tamanho da tela. Isso é importante você saber.

Lembrando que aqui você não está detectando o dispositivo. Você não sabe se o cara está usando um iPhone ou um Motorola. Se ele está usando um iOS ou um Android. Mas, teoricamente, isso não precisa importar pra você, já que você faz websites se preocupando com o tamanho da tela e não qual o sistema operacional usado.

Sugiro que você faça testes e veja essas alterações, comparando com os diversos dispositivos. Faz bem para não confundir as bolas quando você precisar desenhar algo específico ou resolver bugs.