YouTube auf einem vertikalen Bildschirm



Ja, ich bin eine seltsame Person, ich gebe es völlig zu. Ich habe einen vertikalen Monitor auf meinem Heimcomputer. Ich komponiere und lese viele lange Dokumente - und dieser Formfaktor passt perfekt zu mir.



Ich mache das schon lange . Dies ist ein natürlicher Bestandteil meines Workflows. Diese Bildschirmausrichtung eignet sich am besten für Dokumente, die länger als eine E-Mail sind. Die meisten Linux-Anwendungen funktionieren in diesem Format einwandfrei, obwohl das Menü nicht immer auf den Bildschirm passt.



Aber Websites im Internet sind etwas völlig Ungewöhnliches! Viele Leute denken, dass ein vertikaler Bildschirm definitiv ein mobiles Gerät ist!



Ja, das Problem ist geringfügig und betrifft mich persönlich, aber es ist dennoch sinnvoll zu erklären, was die Konsequenzen sind, was der Grund ist und wie es behoben werden kann.

Beispiele von

Hier sind einige typische Websites auf meinem 24-Zoll-Vertikalmonitor. Links ist ein echtes Rendering und rechts ist, wie es sein sollte.





Iss einfach





The Guardian





Poular Science

Probleme

In einer solchen Situation habe ich mehrere Probleme:

• Ist die Navigationsleiste hinter einer Schaltfläche versteckt?
  
  
• Einige Elemente wie Karussells funktionieren nur auf dem Touchscreen
  
  
• Bilder werden mit niedriger Auflösung für 6 "Bildschirme geladen und dann 24" gedehnt.
  
  
• Bei „Master-Bildern“ und fingerfreundlichen Tasten wird viel Platz verschwendet
  
  
• Einige Inhalte sind für mobile Benutzer einfach nicht verfügbar

Warum es passiert

Die native Auflösung des Monitors beträgt 1080 * 1920. Bei dieser Auflösung sind die Schriftarten jedoch zu klein für mich - wenn man bedenkt, wie weit ich vom Bildschirm entfernt bin. Die Pop_OS Linux-Distribution verfügt über ein Dienstprogramm namens Gnome Tweaks, mit dem Sie Schriftarten spezifisch skalieren können, nicht die Auflösung.





Gnome Tweaks mit Font-Skalierungsfaktor Ein Skalierungsfaktor



von 1,5 bedeutet eine effektive Bildschirmauflösung von 720 * 1280.



Das Schnüffeln von Benutzeragenten wird als schlechte Praxis angesehen und nicht empfohlen. Daher überprüfen die meisten Websites nicht das iPhone oder Android, sondern die Bildschirmauflösung mithilfe von JavaScript oder CSS.



Sie sehen einen 720p-Bildschirm im Hochformat und gehen davon aus, dass es sich um ein kleines Bildschirmgerät handelt.

Lösung (Benutzerseite)

Verkleinern Sie den Browser! Dies ist die offensichtliche Antwort. Wenn Sie dreimal drücken Ctrl







, kehrt die effektive Auflösung zu 1080 * 1920 zurück. Aber dann werden einige Websites für das normale Lesen zu klein. Das heißt, Sie müssen den Maßstab der Seite verringern und die Schriftart erhöhen.



Ich habe Fractional Scaling ausprobiert  - es funktioniert gut in Wayland, aber die Schriftarten sind verschwommen und verschwommen.



Deshalb habe ich die Schriftgröße auf 1,36 eingestellt, was eine Auflösung von 864 * 1536 ergibt - das reicht aus, um zu verhindern, dass die meisten Websites das winzige mobile Gerät erkennen.



Aber das ist nicht mein Problem.

Lösung (Serverseite)

STOPPEN SIE NAVELY MIT DER ERLAUBNIS!



Ja, es gibt keine Möglichkeit, die physische Größe des Bildschirms eines Benutzers zu ermitteln. Eine solche Funktionalität gibt es in JavaScript oder CSS einfach nicht.



Aber Sie können die DPI herausfinden. Nun, über ...



CSS ermöglicht es Ihnen, die DPI des Bildschirms herauszufinden.



Website https://DPI.lv/ Lea Veru erkennt die Auflösung meines Monitors 1080 * 1920 korrekt! Unabhängig von der Schriftartenskalierung wird immer die richtige Auflösung angezeigt.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Auf diese Weise wird die tatsächliche Auflösung unabhängig von der Betriebssystemskalierung bestimmt.



Ein weiterer DPI-Detektor zeigt Punkte pro Zoll an. Mein vertikaler Monitor ist als 120 DPI definiert.



Das ist nicht ganz richtig. Und verschiedene Browser-Engines berechnen DPI unterschiedlich. Hier sind die Ergebnisse, die ich unter Linux mit den drei wichtigsten Rendering-Engines erhalte:

• Chrom: 5,14 Pixel / mm
  
  
• Firefox: 4,73 Pixel / mm
  
  
• WebKit: 3,78 Pixel / mm

Wenn Sie den Bildschirm physisch messen, erhalten Sie ungefähr 3,62 Pixel / mm!



Natürlich ist die Metrik nicht ganz genau, aber sie gibt dem Webentwickler zumindest eine ungefähre Vorstellung von der physischen Bildschirmgröße.