Discussão sobre o tamanho dos sites no site HTML5 Building Touch Screen

Este artigo é dividido em duas partes. A primeira parte discute a viabilidade dos sites de plataforma cruzada e a segunda parte discute como o Viewport é configurado.

É verdade que a largura e a altura do rótulo podem ser adaptáveis, podemos fazer isso muito cedo. Mas você descobrirá que muitos sites tradicionais de PC ainda corrigem a largura. (O Taobao usa largura de 1000px, Sohu 950px ...) Por que não permitimos que o site se adapte à largura e altura? Isso porque, se deixarmos a largura da etiqueta ser esticada arbitrariamente pelo navegador, isso levará a uma experiência muito ruim: você não deseja que sua barra esquerda se transforme em macarrão quando o navegador for escalado para 100px; Você também não deseja que seu site pareça um netbook para um aluno da escola primária quando o navegador estiver sobrecarregado. Portanto, não é realista confiar na adaptação do rótulo para obter plataformas cruzadas e está à custa da experiência do usuário. Muitas vezes temos que consertar a largura e a altura.

Contamos com o dispositivo HTML5 para verificar se o dispositivo atual é um telefone celular ou um tablet e carregamos o CSS correspondente de acordo. Por exemplo: se você detectar que seu dispositivo é um tablet, posso exibir três colunas horizontalmente e, se for um telefone celular, exibirei apenas uma coluna. Isso não parece difícil, mas é muito complicado de implementar. Não precisamos apenas desenvolver vários conjuntos de modelos para diferentes dispositivos, mas também processar o tamanho da imagem. Nesse sentido, podemos ver como o Boston Globe usa o HTML5 para implementar um design responsivo.

Em geral, a obtenção de sites de plataforma cruzada é muito cara e restrita para a maioria dos sites. Se é viável depende da situação real do site.

Os navegadores móveis colocam a página em uma janela virtual (viewport). Geralmente, a janela virtual (viewport) é mais larga que a tela, para que cada página da web não precise espremer cada página da web em uma janela muito pequena (isso destruirá o layout da página da web que não é otimizada para navegadores móveis). Os usuários podem ver diferentes partes da página da web através de panning e zoom. Os navegadores móveis introduziram a meta tag da viewport, permitindo que os desenvolvedores da Web controlem o tamanho e a escala da viewport.

CSS Pixels: unidades abstratas usadas pelos navegadores, usadas principalmente para desenhar conteúdo nas páginas da web.

Pixels de dispositivo: exibe a unidade física mínima da tela, cada DP contém sua própria cor e brilho.

O quanto os pixels CSS com valores equivalentes ocupa na tela do telefone não são corrigidos, depende de muitos atributos. Após análise e resumo, podemos criar uma fórmula: 1 pixels CSS = (DevicePixelratio)^2 pixels de dispositivo (^2 significa quadrado. Quanto ao que é o dispositivopixelratio, será explicado mais adiante).

O PPI, às vezes também chamado de DPI, representa o número de pixels por polegada. Quanto maior o valor, maior a tela pode exibir imagens. (Nota: os pixels aqui se referem aos pixels do dispositivo.) Depois de descobrirmos o que significa PPI, podemos entender facilmente o método de cálculo do PPI. Precisamos primeiro calcular os pixels equivalentes diagonais da tela do telefone celular e depois colocar a diagonal (o tamanho da tela do telefone celular é o comprimento da linha diagonal da tela do telefone celular) e podemos obter o PPI. Para anúncios de cálculo precisos, você pode consultar a figura abaixo. O mais interessante é que o PPI do iPhone 4 calculado com base na fórmula é 330, o que é um pouco maior do que o 326 anunciado oficialmente pela Apple.

Da mesma forma, tomando HTC G7 como exemplo, a resolução de 480*800 e 3,7 polegadas é calculada como um PPI de 252.

Calculamos o PPI para saber a qual intervalo de densidade um dispositivo de telefone celular pertence, porque diferentes intervalos de densidade correspondem a diferentes taxas de escala padrão, o que é um conceito muito importante.

A partir da figura acima, pode-se observar que os telefones celulares com PPI entre 120-160 são classificados como telefones celulares de baixa densidade, 160-240 é classificado como densidade média, 240-320 é classificada como alta densidade e acima de 320 é classificada como densidade ultra-alta (a Apple lhe deu um nome de nomes Upstream).

Essas densidades correspondem a um valor de escala específico. Pegue o iPhone 4 ou 4S com o qual estamos mais familiarizados, o PPI é 326, que é um telefone celular de densidade ultra-alta. Quando escrevemos uma página com uma largura de 320px e a colocamos no iPhone para exibir, você descobrirá que é realmente uma largura total. Isso ocorre porque a página é aumentada duas vezes por padrão, ou seja, 640px, enquanto a largura do iPhone 4 ou 4S é exatamente 640px.

A imagem circula o tipo de alta densidade, porque esses são os dados estatísticos dos telefones Android. No mercado telefônico doméstico do Android, os dispositivos de alta densidade representam a grande maioria da participação de mercado. Este é um ponto muito importante e também é um ponto -chave para o qual devemos prestar atenção ao fazer o Android WebApps.

A viewport possui um total de 5 atributos, como segue:

<meta name = "viewport"

content = "

altura = [pixel_value | altura do dispositivo],

largura = [pixel_value | largura de dispositivo],

escala inicial = float_value, escala mínima = float_value, escala máxima = float_value, escala máxima = float_value,

Scalable do usuário = [sim | não] ,

Target- densidadedpi = [dpi_value | dispositivo-dpi | High-DPI | médio-dpi | BOW-DPI] " />

Entre essas propriedades, focamos no destino-densidadeDPI , que pode alterar a escala padrão do dispositivo. Medium-DPI é o valor padrão do destino-densidadeDPI. Se definirmos o destino-densidadeDPI = dispositivo-DPI, o dispositivo renderizará a página de acordo com o DPI real. Por exemplo, se uma imagem de 320*480 for colocada no iPhone 4, ela ocupará a tela por padrão, mas se se alvo-densidadeDPI = DVICE-DPI for definido, a imagem é responsável apenas por um quarto da tela (metade do quadrado) porque a resolução do iPhone 4 é 640*960.

Se fizermos a página de acordo com o rascunho de design de 320px de largura e não fizermos configurações, a página será dimensionada automaticamente para uma largura igual à tela do telefone móvel por padrão (isso ocorre porque o Medium-DPI é o valor padrão das densidade de destinoDPI e é determinado por diferentes taxas de escala correspondentes a diferentes densidades, todas as quais são feitas automaticamente por automaticamente por automaticamente. Portanto, esta solução é simples, áspera e eficaz. Mas há uma desvantagem fatal. Para dispositivos móveis de alta densidade e ultra-alta densidade, as páginas (especialmente imagens) serão distorcidas e quanto mais densas, mais distorcida é.

Nesta solução, usamos o alvo-densidadeDPI = dispositivo-DPI, para que o dispositivo de telefone celular renderize de acordo com o número real de pixels. Em termos profissionais, são 1 pixels CSS = 1 pixels de dispositivo. Por exemplo, para um iPhone com 640*960, podemos criar uma página com 640*960, e não haverá barras de rolagem quando for exibido no iPhone. Obviamente, para outros dispositivos, também são necessárias páginas de tamanhos diferentes, portanto, essa solução é frequentemente usada para usar consultas de mídia para fazer páginas responsivas. Esta solução pode ser perfeitamente apresentada em uma resolução específica, mas com resoluções mais diferentes para serem compatíveis, maior o custo, pois são necessários códigos separados para cada resolução. Aqui está um exemplo simples:

<meta name = "viewport" content = "Target- densidadedpi = dispositivo-dpi, largura = largura do dispositivo" />

#Header {

Antecedentes: URL (média-densidade-imagem.png);

}

Screen @media e (-webkit -device-pixel-ratio: 1.5) {

/ * CSS para telas de alta densidade */

#Header {Background: URL (alta densidade-image.png);}

}

@Media Screen e (-Webkit -Device-Pixel-Ratio: 0.75) {

/ * CSS para telas de baixa densidade */

#Header {Background: URL (baixa densidade-imagem.png);}

Para a grande maioria dos dispositivos Android, as características de alta densidade e média densidade, podemos adotar uma solução de compromisso: restauramos o rascunho de design de 480px de largura, mas o sistema de páginas é feito em 320px de largura (usando o tamanho de fundo para reduzir a imagem) e, em seguida, deixe a página em escala automática. Dessa forma, telefones de baixa densidade têm barras de rolagem (basicamente ninguém está usando esse tipo de telefone), os telefones de média densidade desperdiçam um pouco de tráfego, os telefones de alta densidade serão perfeitamente presentes e os telefones de altura ultra-alta distorcerão ligeiramente (muito poucos telefones Android ultra-alta). As vantagens desta solução são muito óbvias: apenas um conjunto de rascunhos de design e um conjunto de códigos são necessários (aqui está apenas discutindo a situação dos telefones Android).