Comment obtenir la taille réelle d'un appareil ?

Question

J'ai ce problème : Je veux coder un site web qui s'affiche différemment selon l'appareil utilisé. Ce que je voudrais, c'est quelque chose comme :

if (screen.width < 400) useLayout(1);
else if (screen.width >=400 and screen.width < 800) useLayout(2);
else useLayout(3);

Le problème est que lorsque je code pour un appareil mobile, l'icône largeur d'écran rapportée par javascript est celle que j'ai définie en utilisant le métatag viewport. Donc si je crée un fichier avec :

<meta id='viewport' name='viewport' content='width=410'>

puis lors de l'utilisation de javascript (à la fois window.screen.width y document.documentElement.clientWidth ), la valeur retournée est exactement 410. Cette valeur ne reflète pas la taille réelle de l'affichage...

Ce dont j'ai vraiment besoin, c'est de comprendre combien de pouces (ou de cm) représentent 100pixels sur cet appareil...

Y a-t-il un moyen ? Merci d'avance.

Answer 1

Je sais qu'il s'agit d'une étiquette JavaScript, mais je pense que ce n'est pas la solution appropriée. Les feuilles de style CSS intègrent cette fonction. Il est préférable de garder votre couche de conception à l'écart des scripts autant que possible. Consultez CSS Responsive Design / Requêtes sur les médias .

Ejemplo:

@media screen and (max-width:399px) { 
    body {
        background-color : 'red';
    }
}
@media screen and (min-width:400px) and (max-width:799px) { 
    body {
        background-color : 'blue';
    }
}
@media screen and (min-width:800px) { 
    body {
        background-color : 'green';
    }
}

Vous pouvez également les séparer dans leurs propres fichiers CSS afin de minimiser le transfert redondant de données CSS pour les utilisateurs non concernés :

<link rel="stylesheet" media="screen and (max-width:399px)" href="layout1.css" />
<link rel="stylesheet" media="screen and (min-width:400px) and (max-width:799px)" href="layout2.css" />
<link rel="stylesheet" media="screen and (min-width:800px)" href="layout3.css" />

Pour répondre à votre question sur l'imprécision de l'écran de JS, il s'agit de pas si tranché et sec et a besoin d'un peu d'espace pour écarts d'interprétation .