YouTube sur un écran vertical



Oui, je suis une personne étrange, je l'admets complètement. J'ai un moniteur vertical sur mon ordinateur personnel. Je compose et lis beaucoup de longs documents - et ce facteur de forme me convient parfaitement.



Je fais ça depuis longtemps . Cela fait naturellement partie de mon flux de travail. Cette orientation de l'écran est la meilleure pour tout document plus long qu'un e-mail. La plupart des applications Linux fonctionnent correctement dans ce format, même si le menu ne tient pas toujours à l'écran.



Mais les sites sur Internet sont quelque chose de complètement anormal! Beaucoup de gens pensent qu'un écran vertical est définitivement un appareil mobile!



Oui, le problème est mineur et me concerne personnellement, mais il est tout de même logique d'expliquer quelles sont les conséquences, quelle en est la raison et comment y remédier.

Exemples de

Voici quelques sites Web typiques sur mon moniteur vertical 24 pouces. Sur la gauche se trouve un vrai rendu, et sur la droite, comment il devrait être.





Mangez juste





le gardien





Poular Science

Problèmes

Dans une telle situation, j'ai plusieurs problèmes:

• La barre de navigation est-elle cachée derrière un bouton?
  
  
• Certains éléments comme les carrousels ne fonctionnent que sur l'écran tactile
  
  
• Les images sont chargées en basse résolution pour des écrans de 6 ", puis étirées sur 24"
  
  
• Beaucoup d'espace est gaspillé sur les «images principales» et les boutons faciles à utiliser
  
  
• Certains contenus ne sont tout simplement pas disponibles pour les utilisateurs mobiles

Pourquoi ça arrive

La résolution native du moniteur est de 1080 * 1920. Mais à cette résolution, les polices sont trop petites pour moi - étant donné la distance que je me situe par rapport à l'écran. La distribution Linux Pop_OS a un utilitaire appelé Gnome Tweaks qui vous permet de mettre à l'échelle les polices spécifiquement, pas la résolution.





Gnome Tweaks avec facteur de mise à l'échelle de la police Un



facteur de mise à l'échelle de 1,5 signifie une résolution d'écran effective de 720 * 1280.



Le reniflement d'agent utilisateur est considéré comme une mauvaise pratique et n'est pas recommandé. Par conséquent, la plupart des sites ne se soucient pas de vérifier l'iPhone ou Android, mais vérifient plutôt la résolution de l'écran en utilisant JavaScript ou CSS.



Ils voient un écran 720p en orientation portrait et supposent raisonnablement qu'il s'agit d'un petit écran.

Solution (côté utilisateur)

Faites un zoom arrière dans le navigateur! C'est la réponse évidente. Si vous appuyez trois fois Ctrl







, la résolution effective reviendra à 1080 * 1920. Mais alors certains sites deviendront trop petits pour une lecture normale. Autrement dit, vous devez réduire l'échelle de la page et augmenter la police.



J'ai essayé la mise à l'échelle fractionnée  - cela fonctionne bien dans Wayland, mais les polices sont floues et floues.



J'ai donc défini l'échelle de police sur 1,36, ce qui donne une résolution de 864 * 1536 - c'est suffisant pour empêcher la plupart des sites de reconnaître le petit appareil mobile.



Mais ce n'est pas mon problème.

Solution (côté serveur)

ARRÊTEZ NAVELYMENT D'UTILISER LA PERMISSION!



Oui, il n'y a aucun moyen de connaître la taille physique de l'écran d'un utilisateur. Une telle fonctionnalité n'existe tout simplement pas dans JavaScript ou CSS.



Mais vous pouvez découvrir le DPI. Eh bien, à propos de ...



CSS vous permet de connaître le DPI de l'écran



Site Web https://DPI.lv/ Lea Veru reconnaît correctement la résolution de mon moniteur 1080 * 1920! Indépendamment de la mise à l'échelle de la police, il affiche toujours la résolution correcte.

var dppx = window.devicePixelRatio;
var screenWidth  = screen.width  * dppx;
var screenHeight = screen.height * dppx;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

C'est ainsi que la résolution réelle est déterminée indépendamment de la mise à l'échelle du système d'exploitation.



Un autre détecteur DPI affiche des points par pouce. Mon moniteur vertical est défini comme 120 DPI.



Ce n'est pas tout à fait correct. Et différents moteurs de navigateur calculent le DPI différemment. Voici les résultats que j'obtiens sous Linux sur les trois principaux moteurs de rendu:

• Chrome: 5,14 pixels / mm
  
  
• Firefox: 4,73 pixels / mm
  
  
• WebKit: 3,78 pixels / mm

Si vous mesurez physiquement l'écran, vous obtenez environ 3,62 pixels / mm!



De toute évidence, la métrique n'est pas entièrement précise, mais elle donne au développeur Web au moins une idée approximative de la taille physique de l'écran.