Déterminer la largeur d'une page Web en pouces

J'ai une feuille de style CSS qui utilise des requêtes multimédias pour modifier la façon dont une page est affichée en fonction du nombre de pouces qu'il est en largeur (par exemple, s'il est inférieur à 4 pouces ou affiché sur un périphérique de poche, LAF convivial).

Le problème que j'ai est avec son contenu. Sur la page d'accueil, il existe une interface de type dock qui modifie dynamiquement la hauteur en fonction de la hauteur et de la largeur actuelles de la fenêtre afin que le texte et les éléments ne quittent jamais l'écran. Cependant, mon JS qui détermine cette taille ne sait pas quand la feuille de style a changé pour les appareils portables ou les petits écrans, de sorte que le comportement continue de façon imprévisible dans ce mode. Comment puis-je utiliser JavaScript pour détecter lorsque la page est inférieure ou égale à 4 pouces afin que je puisse désactiver le redimensionnement automatique du quai réformé?

C'est un problème non trivial.

Voici un lien vers un site qui a une fonction ( getUnits ) pour obtenir le style calculé actuel dans une unité de mesure de votre choix (y compris les pouces) http://upshots.org/javascript/javascript-get-current-style-as- Toute unité

En utilisant cette fonction, vous pouvez vérifier if (getUnits(document.body, "width").inch < 4) . La façon dont cette fonction fonctionne, pour les curieux, c'est en créant un élément temporaire dans l'espace de mesure souhaité et en lisant le rapport aux pixels. De cette façon, vous laissez le navigateur répondre en fonction de ses propres connaissances, le PPI de l'appareil. Donc, c'est une sorte de polyfill pour window.devicePixelRatio , mais les navigateurs mentent principalement sur leur PPI. Pour ces fins, cependant, cela n'a pas d'importance car ils appliqueront le même mensonge à votre CSS unité pouces.

Je ne teste pas cela sur de véritables navigateurs, mais cela devrait fonctionner:

  1. Définissez un <div id="screen" style="display:none"> caché <div id="screen" style="display:none"> dans votre code HTML.

  2. Dans CSS, utilisez une requête multimédia comme:

      @media screen { div#screen{color: blue;} } @media screen and (min-width: 13in) { div#screen{color: red;} } 

Ensuite, vous pouvez lire la couleur de l' div#screen dans JS pour choisir les actions.

De plus, vous devriez prendre un événement de redimensionnement Windows en considération JS.

Tout ce que vous pouvez faire est de lire le style actuel d'un élément connu. En regardant quelque chose comme la largeur d'un DIV en enveloppe externe, vous pouvez déterminer quelle feuille de style dans votre requête multimédia est utilisée.

Je pense que vous regardez le problème sous le mauvais angle. Vous ne devriez pas penser à des pouces. Ce que vous devez savoir est: compte tenu du périphérique et du navigateur, combien de pixels devrait être ma page?

La réponse réside dans le maintien d'un ensemble connu d'appareils et leur hauteur de pixels respective.

Un iPhone 5 est plus grand qu'un iPhone 4, par exemple, cela affecte l'effet que vous allez.