Suporte técnico prático
Tamanho da ecrã, zoom e pixels CSS
A leitura do tamanho da ecrã de um navegador é útil para suporte, mas nem sempre é a especificação de exibição impressa na caixa.
Última vez revisado:
O tamanho da ecrã e o espaço do navegador respondem a perguntas diferentes
Um monitor pode ter uma alta resolução de hardware, enquanto um navegador relata uma ecrã lógica menor.Um site também precisa caber na janela do navegador real, que pode ser muito mais estreita do que a ecrã.Antes de diagnosticar um formulário recortado ou um botão sobreposto, identifique qual valor você está comparando.
Entenda as três leituras principais
| Leitura | O que ele descreve | Use-o para |
|---|---|---|
| Tamanho da ecrã, em pixels CSS | As dimensões da ecrã relatadas pela API de ecrã do navegador. | Entender a visão do navegador da ecrã, sujeita a escala e comportamento de privacidade. |
| Janela do navegador, em pixels CSS | A janela de visualização do layout da página, em vez da parte externa do quadro do navegador. | Reproduzir um problema de layout responsivo ou comparar larguras de janela. |
| Proporção de pixel do dispositivo | A relação entre pixels de dispositivo e pixels CSS no ambiente de navegação atual. | Explicando a densidade e alguns efeitos de zoom.Não é um modelo de monitor ou um inventário de hardware. |
Por que o zoom e a escala de exibição são importantes
CSS O dimensionamento do sistema operativo e o zoom da página do navegador podem alterar como essas unidades se relacionam com a exibição. Uma janela com as mesmas dimensões externas pode dar a uma página menos espaço de layout em um zoom de página maior. Mover um navegador entre ecrãs também pode alterar seu ambiente relatado.
O zoom de pinça em um dispositivo sensível ao toque é diferente do zoom de página comum: ele pode ampliar a janela de visualização visual sem alterar a janela de visualização de layout da mesma maneira. Esse verificador relata os valores de layout do navegador, portanto, nem todas as alterações de zoom visíveis alterarão o número da janela. a janela de visualização do layout e relação de pixels do dispositivo.
Reproduza uma falha de layout com uma alteração controlada
- Abrir o verificador de ecrã e janela no navegador afetado.
- Registre a leitura da janela rotulada, a versão do navegador e qualquer zoom de página conhecido.
- Se apropriado, compare também o zoom normal da página do navegador, sem remover as definições de acessibilidade de que você precisa.
- Retorne à página afetada e repita a mesma ação.
Por exemplo, se um botão de checkout se sobrepõe em uma janela estreita, mas não em uma mais larga, envie as leituras de ambas as janelas. Isso fornece ao desenvolvedor um ponto de partida útil para reproduzir o layout, mas não prova que o monitor está com defeito ou que você deve comprar um monitor de resolução mais alta.
Capture a parte útil da página
Uma captura de ecrã cortada pode mostrar a sobreposição ou o controle ausente. Inclua conteúdo circundante suficiente para explicar onde ele ocorre, enquanto remove nomes, detalhes da conta e guias privadas. seus detalhes de suporte revisados.
Se você precisar da resolução de ecrã nativa
Multiplicar a leitura da ecrã do navegador pela proporção de pixels não é uma maneira confiável de provar a resolução nativa do painel, especialmente com zoom, sessões remotas, vários monitores ou controles de privacidade envolvidos.