Os navegadores móveis geralmente renderizam páginas em uma janela virtual mais larga que a tela. Esta janela virtual é viewport. O objetivo é exibir páginas da Web que não são adaptadas ao terminal móvel normalmente, para que possam ser totalmente exibidas aos usuários. Às vezes, quando usamos dispositivos móveis para acessar a página da web da área de trabalho, veremos uma barra de rolagem horizontal, e a largura da área de exibição aqui é a largura da viewport.
Regularmente, se a página puder ser dimensionada, use o seguinte código
<meta nome = conteúdo da viewport = largura = largura do dispositivo, escala inicial = 1 />
Se você não quiser aumentar o zoom, use o seguinte código
2. A diferença entre pixels e pixels de dispositivo em CSS<meta nome = conteúdo da viewport = largura = largura do dispositivo, escala inicial = 1,0, escala mínima = 1,0, escala máxima = 1,0, scalable do usuário = não>
Ao desenvolver páginas da web de desktop, 1px no CSS é 1px no dispositivo; No entanto, 1px no CSS é apenas um valor abstrato, que não representa os pixels reais; Enquanto em dispositivos móveis, a densidade de pixels de diferentes dispositivos é diferente e 1px no CSS pode não ser igual a um valor de pixel do dispositivo real. O dimensionamento do usuário também alterará quantos pixels de dispositivo 1PX no CSS representam. Esta proporção é devicePixelratio
Pixels físicos/pixels independentes = DevicePixelratio
Podemos aumentar o zoom no navegador e imprimir janela.DevicePixelratio no console para ver o tamanho do dispositivoPixelratio. Os pixels independentes podem ser entendidos como PX no CSS.
3. Noções básicas de viewportCódigo:
<meta nome = conteúdo da viewport = largura = largura do dispositivo, escala inicial = 1, escala máxima = 1>
A seguir, são apresentadas várias propriedades de viewport. Essas propriedades podem ser usadas de maneira mista. Várias propriedades devem ser separadas por vírgulas ao mesmo tempo. Aqui, expandimos um conceito chamado Ideal Viewport, que se refere à viewport em circunstâncias ideais. Ele pode visualizar todo o conteúdo da página da web normalmente sem o dimensionamento do usuário e as barras de rolagem horizontal e pode ver todo o texto claramente. Não importa quão pequeno este texto seja definido no CSS, ele pode ser visto claramente quando exibido.
| propriedade | descrever |
|---|---|
| largura | Controla a largura da viewport, você pode especificar um número; ou defina a largura do dispositivo para especificar |
| altura | Controle a altura da viewport. Esta propriedade não é muito importante e raramente usada. |
| escala inicial | Controle o nível de zoom em idealViewport quando a página é carregada inicialmente, geralmente definida como 1, que pode ser um decimal |
| escala máxima | Permite que o valor máximo de escala do usuário seja um número e pode ser decimal |
| Escala mínima | Permite que o valor mínimo de escala do usuário seja um número, que pode ser tomado com decimais. |
| Scalable | Se o usuário tem permissão para escalar, o valor é não ou sim, não é permitido, sim, significa permitir |
1.Width e em escala inicial
Quando a largura e a escala inicial estiverem definidas, o navegador seleciona automaticamente o maior valor para adaptação. Ativo:
<meta nome = conteúdo da viewport = largura = 400, escala inicial = 1>
O navegador selecionará um grande valor para se adaptar. Se a largura da viewport ideal da janela atual for 300 e o valor de escala inicial for 1, o valor da largura é 400 será obtido; Se a visualização ideal da janela atual for 480, 480 for selecionado.
De fato, largura = largura do dispositivo e escala inicial = 1 representam a aplicação da viewport ideal, mas em dispositivos móveis como iPad e iPhone e IE, as telas horizontais e verticais não são distinguidas e a largura da tela vertical é tomada por default. A melhor maneira de escrever compatibilidade é
<meta nome = conteúdo da viewport = largura = largura do dispositivo, escala inicial = 1>
2. Altere dinamicamente os atributos
um. document.write ()
document.write ('<meta name = viewport content = width = largura do dispositivo, escala inicial = 1>')
B.SetAttribute
conceito de viewportvar mvp = document.getElementById ('testViewport');
mvp.setAttribute ('content', 'largura = 480');
Os navegadores móveis geralmente renderizam páginas em uma janela virtual mais larga que a tela. Esta janela virtual é viewport. O objetivo é exibir páginas da Web que não são adaptadas ao terminal móvel normalmente, para que possam ser totalmente exibidas aos usuários. Às vezes, quando usamos dispositivos móveis para acessar a página da web da área de trabalho, veremos uma barra de rolagem horizontal, e a largura da área de exibição aqui é a largura da viewport.
Diferença entre pixels e pixels de dispositivo em CSSAo desenvolver páginas da web de desktop, 1px no CSS é 1px no dispositivo; No entanto, 1px no CSS é apenas um valor abstrato, que não representa os pixels reais; Enquanto em dispositivos móveis, a densidade de pixels de diferentes dispositivos é diferente e 1px no CSS pode não ser igual a um valor de pixel do dispositivo real. O dimensionamento do usuário também alterará quantos pixels de dispositivo 1PX no CSS representam. Esta proporção é devicePixelratio
Pixels físicos/pixels independentes = DevicePixelratio
Podemos aumentar o zoom no navegador e imprimir janela.DevicePixelratio no console para ver o tamanho do dispositivoPixelratio. Os pixels independentes podem ser entendidos como PX no CSS.
Noções básicas de viewportUm site otimizado para dispositivos móveis típico contém conteúdo semelhante ao seguinte:
<meta nome = conteúdo da viewport = largura = largura do dispositivo, escala inicial = 1, escala máxima = 1>
A seguir, são apresentadas várias propriedades de viewport. Essas propriedades podem ser usadas de maneira mista. Várias propriedades devem ser separadas por vírgulas ao mesmo tempo. Aqui, expandimos um conceito chamado Ideal Viewport, que se refere à viewport em circunstâncias ideais. Ele pode visualizar todo o conteúdo da página da web normalmente sem o dimensionamento do usuário e as barras de rolagem horizontal e pode ver todo o texto claramente. Não importa quão pequeno este texto seja definido no CSS, ele pode ser visto claramente quando exibido.
| propriedade | descrever |
|---|---|
| largura | Controla a largura da viewport, você pode especificar um número; ou defina a largura do dispositivo para especificar |
| altura | Controle a altura da viewport. Esta propriedade não é muito importante e raramente usada. |
| escala inicial | Controle o nível de zoom em idealViewport quando a página é carregada inicialmente, geralmente definida como 1, que pode ser um decimal |
| escala máxima | Permite que o valor máximo de escala do usuário seja um número e pode ser decimal |
| Escala mínima | Permite que o valor mínimo de escala do usuário seja um número, que pode ser tomado com decimais. |
| Scalable | Se o usuário tem permissão para escalar, o valor é não ou sim, não é permitido, sim, significa permitir |
1.Width e em escala inicial
Quando a largura e a escala inicial estiverem definidas, o navegador seleciona automaticamente o maior valor para adaptação. Ativo:
<meta nome = conteúdo da viewport = largura = 400, escala inicial = 1>
O navegador selecionará um grande valor para se adaptar. Se a largura da viewport ideal da janela atual for 300 e o valor de escala inicial for 1, o valor da largura é 400 será obtido; Se a visualização ideal da janela atual for 480, 480 for selecionado.
De fato, largura = largura do dispositivo e escala inicial = 1 representam a aplicação da viewport ideal, mas em dispositivos móveis como iPad e iPhone e IE, as telas horizontais e verticais não são distinguidas e a largura da tela vertical é tomada por default. A melhor maneira de escrever compatibilidade é
<meta nome = conteúdo da viewport = largura = largura do dispositivo, escala inicial = 1>
2. Altere dinamicamente os atributos
um. document.write ()
document.write ('<meta name = viewport content = width = largura do dispositivo, escala inicial = 1>')
B.SetAttribute
var mvp = document.getElementById ('testViewport');
mvp.setAttribute ('content', 'largura = 480');
Ok, este artigo foi apresentado a você. Você pode escolher de acordo com suas próprias necessidades de teste. De um modo geral, PC e telefones celulares podem ser usados sem adaptabilidade e não suportam a escala. Se você pular para o telefone celular, poderá escalar sem nenhum impacto.