YouTube em uma tela vertical



Sim, sou uma pessoa estranha, admito. Tenho um monitor vertical no meu computador doméstico. Eu componho e leio muitos documentos longos - e esse formato combina perfeitamente comigo.



Venho fazendo isso há muito tempo . Esta é uma parte natural do meu fluxo de trabalho. Esta orientação de tela é melhor para qualquer documento mais longo do que um e-mail. A maioria dos aplicativos Linux funcionam bem neste formato, embora o menu nem sempre caiba na tela.



Mas os sites na Internet são algo completamente anormal! Muitas pessoas pensam que uma tela vertical é definitivamente um dispositivo móvel!



Sim, o problema é menor e me preocupa pessoalmente, mas ainda faz sentido explicar quais são as consequências, qual o motivo e como corrigi-lo.

Exemplos de

Aqui estão alguns sites típicos no meu monitor vertical de 24 polegadas. À esquerda está um render real e à direita é como deveria ser.





Just Eat





The Guardian





Poular Science

Problemas

Em tal situação, tenho vários problemas:

• A barra de navegação está escondida atrás de um botão?
  
  
• Alguns elementos, como carrosséis, só funcionam na tela sensível ao toque
  
  
• As imagens são carregadas em baixa resolução para telas de 6 "e, em seguida, esticadas em 24"
  
  
• Muito espaço é desperdiçado em "imagens principais" e botões fáceis de usar
  
  
• Alguns conteúdos simplesmente não estão disponíveis para usuários de celular

Porque isso acontece

A resolução nativa do monitor é 1080 * 1920. Mas com esta resolução, as fontes são muito pequenas para mim - considerando a distância que me sinto da tela. A distribuição Pop_OS Linux tem um utilitário chamado Gnome Tweaks que permite dimensionar fontes especificamente, não resolução.





Ajustes do Gnome com fator de escala de fonte Um



fator de escala de 1,5 significa uma resolução de tela efetiva de 720 * 1280.



A detecção do agente do usuário é considerada uma prática inadequada e não é recomendada. Portanto, a maioria dos sites não se preocupa em verificar o iPhone ou Android, mas verifica a resolução da tela usando JavaScript ou CSS.



Eles veem uma tela 720p na orientação retrato e razoavelmente presumem que é um dispositivo de tela pequena.

Solução (lado do usuário)

Diminua o zoom no navegador! Esta é a resposta óbvia. Se você pressionar três vezes Ctrl







, a resolução efetiva retornará a 1080 * 1920. Mas alguns sites se tornarão muito pequenos para uma leitura normal. Ou seja, você precisa reduzir a escala da página e aumentar a fonte.



Tentei o Fractional Scaling  - funciona bem no Wayland, mas as fontes estão borradas e confusas.



Então, eu defini a escala da fonte para 1,36, o que dá uma resolução de 864 * 1536 - o que é o suficiente para evitar que a maioria dos sites reconheça o minúsculo dispositivo móvel.



Mas isso não é problema meu.

Solução (lado do servidor)

PARE MARINHO DE USAR A PERMISSÃO!



Sim, não há como saber o tamanho físico da tela de um usuário. Essa funcionalidade simplesmente não existe em JavaScript ou CSS.



Mas você pode descobrir o DPI. Bom, sobre ...



CSS permite que você descubra o DPI da tela



Site https://DPI.lv/ Lea Veru reconhece corretamente a resolução do meu monitor 1080 * 1920! Independentemente da escala da fonte - sempre mostra a resolução correta.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

É assim que a resolução real é determinada, independentemente da escala do sistema operacional.



Outro detector de DPI mostra pontos por polegada. Meu monitor vertical é definido como 120 DPI.



Isso não é totalmente correto. E diferentes mecanismos de navegador calculam o DPI de maneira diferente. Aqui estão os resultados que obtenho no Linux nos três motores de renderização principais:

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

Se você medir fisicamente a tela, obterá cerca de 3,62 pixels / mm!



Obviamente, a métrica não é totalmente precisa, mas dá ao desenvolvedor da web pelo menos uma ideia aproximada do tamanho físico da tela.