Mobile Development
1.0.0
Refere -se ao comprimento diagonal da tela, em polegadas. Os tamanhos comuns incluem: 3,5 polegadas, 4,0 polegadas, 5,0 polegadas, 5,5 polegadas, 6,0 polegadas, etc.
Nota: 1 polegada (polegada) = 2,54 cm (cm)
Refere -se ao número total de pontos de pixels físicos na tela nas direções horizontal e vertical, que geralmente são representadas por n * m. Por exemplo: A resolução da tela do iPhone6 é: 750 * 1334
| modelo | Resolução (soma de pixels físicos) |
|---|---|
| iPhone 3G/3Gs | 320 * 480 |
| iPhone 4/4s | 640 * 960 |
| iPhone 5/5s | 640 * 1136 |
| iPhone 6/7/8 | 750 * 1334 |
| iPhone 6p / 7p / 8p | 1242 * 2208 |
| iPhone X. | 1125 * 2436 |
| Hawei p30 | 1080 * 2340 |
| Hawei mate40 | 2772 * 1344 |
| Xiaomi 10 | 2340 * 1080 |
| Xiaomi 11 | 3200 * 1440 |
Também conhecido como: densidade de pixels de tela, refere -se ao número de pontos de pixels físicos contidos em cada polegada na tela. A unidade é PPI (pixels por polegada). De fato, há outra unidade DPI (pontos por polegada). Os métodos de cálculo dos dois valores são os mesmos, mas os cenários de uso são diferentes. O PPI é usado principalmente para medir telas e o DPI é usado principalmente para medir impressoras, projetores etc.
Os pixels físicos, também conhecidos como pixels de dispositivo , são uma unidade de comprimento (px). Um pixel físico é um ponto de imagem físico na tela, que é um pequeno componente físico luminescente (que pode ser simplesmente entendido como uma lâmpada super minúscula), que é a granularidade mínima que a tela pode exibir. O número físico de pontos de pixel (resolução) da tela é um parâmetro importante da tela do telefone celular e é determinado pelo fabricante da tela e não pode ser modificado após a produção . Por exemplo, os pixels físicos que o iPhone6 tem na direção horizontal são 750, e os pixels físicos que têm na direção vertical são 1334, representados por 750*1334.
O CSS Pixel também é conhecido como: pixel lógico. O pixel CSS é uma unidade abstrata de comprimento e a unidade também é PX. É criado para os desenvolvedores da Web medirem com precisão o tamanho do conteúdo em uma página da web. Usamos pixels CSS na redação de CSS JS Less.
Os pixels independentes do dispositivo são chamados de DIP ou DP (pixel independente do dispositivo), também conhecido como: pixels independentes da densidade da tela.
INTRODUÇÃO: Na época em que a [HD Screen] não apareceu, 1 CSS Pixel corresponde a 1 pixel físico, mas desde o surgimento da [HD Screen], os dois não são mais um relacionamento de 1 a 1. Em 2010, a Apple lançou um novo padrão de exibição: compactar mais pontos de pixels físicos em uma tela enquanto o tamanho da tela permanece inalterado , para que a resolução seja maior e o efeito da exibição seja melhor e mais delicado. A Apple chama esta tela: tela retina (também conhecida como tela Retina) e, ao mesmo tempo, lançou o produto digital de fabricação de época equipado com esta tela - o iPhone 4.
O programador escreveu: largura = 2px, altura = 2px caixa. Se um pixel CSS corresponde diretamente a 1 pixel físico, uma vez que o tamanho da tela do iPhone3G/se iPhone4 é o mesmo do iPhone4, a tela do iPhone4 pode acomodar mais pixels físicos, para que os pixels físicos do iPhone4 sejam muito menores que os de iPhone3G/s. Em teoria, esta caixa será muito menor na tela do iPhone4 do que na tela iPhone3G/S. O fato é que o iPhone3G/S tem o mesmo tamanho que o iPhone4! ! ! , mas o iPhone 4 é mais delicado e claro. Como fazer isso? Isso depende dos pixels independentes do dispositivo. 
O surgimento de pixels independentes do dispositivo faz com que os elementos tenham tamanhos normais, mesmo na tela [HD]. S torna o código não afetado pelo dispositivo. É definido pelo fabricante do dispositivo de acordo com as características da tela e não pode ser alterado.
Razão pixel (DPR, proporção de pixels do dispositivo): a proporção de [pixel físico] e [pixel independente do dispositivo] em uma única direção. Isto é: dpr = pixels físicos/pixels independentes de dispositivo
| modelo | Resolução (soma de pixels físicos) | Pixels independentes do dispositivo (DIP ou DP) | Proporção de pixel (DPR) |
|---|---|---|---|
| iPhone 3G/3Gs | 320 * 480 | 320 * 480 | 1 |
| iPhone 4/4s | 640 * 960 | 320 * 480 | 2 |
| iPhone 5/5s | 640 * 1136 | 320 * 568 | 2 |
| iPhone 6/7/8 | 750 * 1334 | 375 * 667 | 2 |
| iPhone 6p / 7p / 8p | 1242 * 2208 | 414 * 736 | 3 |
| iPhone X. | 1125 * 2436 | 375 * 812 | 3 |
https://uiiiii.com/screen/index.htm
Diagramas de bitmap e vetorial
Uma imagem de um pouco de pixel também é uma unidade de comprimento. Um pixel de imagem um pouco pode ser entendido como uma "grade pequena" em um bitmap, que é a menor unidade de um bitmap.
Atualmente, apenas o logotipo precisa ser exibido em alta definição, ou o logotipo do formato SVG pode ser fornecido para resolver o problema. Caso contrário, a consulta de mídia é usada:
@media screen and ( -webkit-min-device-pixel-ratio : 2 ) {
. logo {
content : url (.. / imgs / logo@ 2 x.jpg)
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ) {
. logo {
content : url (.. / imgs / logo@ 3 x.jpg)
}
}No lado do PC, a largura padrão da viewport é a mesma que a largura da janela do navegador. No documento padrão do CSS, a viewport também é chamada: Blocos inicialmente contendo, que é a causa raiz de todos os cálculos de largura por percentagem do CSS. No lado do PC, a largura pode ser obtida das seguintes maneiras:
console . log ( '最干净的显示区域' , document . documentElement . clientWidth ) ; // 常用
console . log ( '最干净的显示区域+滚动条' , window . innerWidth ) ;
console . log ( '最干净的显示区域+滚动条+浏览器边框' , window . outerWidth ) ;
console . log ( '与浏览器无关，当前设备显示分辨率横向的值' , screen . width ) ; Em dispositivos móveis, os fabricantes de navegadores enfrentam um problema relativamente grande: como eles apresentam dezenas de milhares, até centenas de milhões de páginas da Web para PC em dispositivos móveis de maneira completa sem barras de rolagem horizontal? Então precisamos introduzir três conceitos de terminais móveis: 1. Viewport de layout, 2. Visual Viewport, 3. Viewport ideal
Usado para resolver o problema da exibição de página inicial em telefones celulares. Nos primeiros dias, fizemos isso: a largura das páginas da web do PC é geralmente: 960px O intervalo de 1024px, mesmo que exceda esse intervalo, 960px A área de 1024px ainda é a localização do corpo principal.
Os fabricantes de navegadores projetaram um contêiner para dispositivos móveis. Primeiro, use este contêiner para manter a página da web no PC. A largura deste contêiner é geralmente 980px . Diferentes dispositivos podem diferir, mas a diferença não é grande. Em seguida, o contêiner é compactado igualmente proporcionalmente à mesma largura que o telefone celular, para que não haja barra de rolagem e a página possa ser totalmente apresentada. No entanto, ainda há problemas para fazer isso: o conteúdo da página da web é compactado muito pequeno, o que afeta seriamente a experiência do usuário.
Como obter viewports de layout no terminal móvel: document.documentElement.clientWidth (geralmente 980px, iPad Pro é 1024px)
Nota: Depois que a visualização do layout é compactada, a largura horizontal não é mais 375px, mas 980px, porque a viewport de layout é compactada, não interceptada.
A visualização visual é a área visível para o usuário. Sua largura absoluta é sempre tão ampla quanto a tela do dispositivo, mas o valor dos pixels CSS contidos nessa largura varia. Por exemplo: Geralmente, os telefones celulares colocam 980 pixels CSS no visual viewport (tamanho da viewport visual = tamanho da viewport de layout) , enquanto o iPad Pro colocará 1024 pixels CSS na visualização visual.
A maneira de obter viewport visual no terminal móvel: window.innerWidth , mas não pode ser obtido corretamente no Android 2, Opera Mini e UC8. (Geralmente, a visualização visual não é vista através do código)
Se você tomar o iPhone 6 como exemplo, descreva a tela:
Uma visualização de layout que é igual à largura da tela (DP/DIP) é chamada de viewport ideal, portanto, também pode -se dizer que uma viewport ideal é um padrão: a largura da viewport de layout e a tela (DP/DIP) são alcançados por metatags.
Métodos específicos para configurar uma viewport ideal:
< meta name =" viewport " content =" width=device-width " >【Resumir】:
1. Descrição da tela: Pixels físicos: 750p ×, pixels independentes do dispositivo: 375px, CSS Pixels: 980px. 2 Vantagens: O efeito de renderização de elementos em diferentes dispositivos é quase o mesmo, porque são escalonados por recipientes de layout, como 200 caixas largas: 200/980 3. Desvantagens: Os elementos são muito pequenos, o texto da página não é claro e a experiência do usuário não é boa.
1. Descrição da tela: Pixels físicos: 750px, pixels independentes do dispositivo: 375px, CSS Pixels: 375px. 2 Vantagens: A página é claramente exibida, o conteúdo não é mais tão pequeno quanto difícil de observar e a experiência do usuário é melhor. 3. Desvantagens: o mesmo elemento tem diferentes efeitos de renderização em telas diferentes (dispositivos). Por exemplo, a caixa 375 larga: 375/375 e 375/414 (exibição não igual a equivalente). 4. Como resolvê -lo: faça adaptação.
Ao aumentar o zoom:
Reduza o tamanho:
Processo de algoritmo: Ao aumentar, o navegador intercepta uma certa proporção de área para dentro e, em seguida, preenche imediatamente a imagem restante com proporções iguais para toda a viewport, e os elementos que não podem ser abaixados serão embrulhados automaticamente.
Script de monitoramento:
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
// pc端， onresize监测的是视口的变化（初识包含块）
window . onresize = ( ) => {
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
} Ao aumentar o zoom:
NOTA: O escala móvel não afetará o layout da página, porque o tamanho da viewport de layout não muda durante a escala.
A tag meta-viewport foi introduzida pela Apple em 2007 para controlar a viewport de layout móvel, tentando alterar as regras do setor da visualização de layout 980. Opções relacionadas à vieta:
O valor da largura pode ser largura de dispositivo ou valor específico, mas alguns telefones Android não suportam valor específico, e os suportes completos da série iOS
width=device-width, initial-scale=1.0 está escrita em conjunto.Escala máxima permitida para escala do usuário [Safari não suporta] em escala máxima = largura da tela (DIP Independent Pixels, Dip) / Visual Viewport Largura
Escala máxima que permite que o usuário escala em escala mínima = largura da tela (DIP Independent Pixels, Dip) / Visual Viewport Largura
Se devem permitir que os usuários amplie a página através dos dedos [Safari não suporta]
A configuração para cobrir pode resolver o problema do espaço em branco na tela [Notch]
< meta name =" viewport " content =" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover " >1. Por que você precisa se adaptar? Devido aos diferentes tamanhos de tela dos dispositivos móveis, haverá: o mesmo elemento mostrará efeitos diferentes em dois telefones diferentes (proporções diferentes). Se o mesmo elemento for exibido em diferentes dispositivos, ele precisará ser adaptado. Não importa qual método de adaptação seja usado, o princípio central é sempre: comparação igual!
Existem três métodos de adaptação convencionais:
EM e REM são unidades de comprimento no CSS. E ambos são unidades de comprimento relativo, mas os dois são um pouco diferentes
Sob a viewport ideal, o rascunho do projeto (DIP é 375px) é usado como padrão e a fonte raiz é de 100px para corresponder à queda de outros dispositivos.
Na viewport ideal, defina a fonte raiz como Dip/10, ou seja, compare o mergulho com 10 REM, considerando quantos elementos internos estão ocupados
1 VW = 1% da largura da viewport de layout 2 VH = 1% da altura do layout Viewport
Veja a compatibilidade: caniuse.com
1px na tela HD corresponde a pixels mais físicos (lâmpadas pequenas), para que a borda de 1 pixels pareça mais espessa. A solução é a seguinte:
@media screen and ( -webkit-min-device-pixel-ratio : 2 ){
# demo {
border : solid 0.5 px black;
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ){
# demo {
border : solid 0.333 px black;
}
}Lista de eventos móveis
Os eventos acima apareceram pela primeira vez no iOS Safari para transmitir algumas informações especiais aos desenvolvedores
Perceber:
Após o término do evento Touch, o evento de clique do elemento será acionado por padrão. Se a viewport perfeita não estiver definida, o intervalo de tempo para o evento será de cerca de 300ms. Se a visualização perfeita estiver definida, o intervalo de tempo será de cerca de 30ms (dependendo das características específicas do dispositivo).
Se o evento de toque fizer com que o elemento seja oculto, a ação de cliques atuará no elemento por trás dele, acionando o evento de clique ou o salto de página do novo elemento. Esse fenômeno é chamado de penetração de clique .
Bloquear o comportamento padrão
btn . addEventListener ( 'touchend' , ( event ) => {
event . preventDefault ( )
shade . style . display = 'none'
} ) Faça os elementos nos bastidores não tenham características de cliques e modifique -as em tags normais de div:
< div id =" baidu " >点我去百度</ div >Use o evento Toukend e clique para pular para a nova página da web
baidu . addEventListener ( 'touchend' , ( ) => {
window . location . href = 'https://www.baidu.com'
} ) Use o atributo Pointer-Events no CSS para perder temporariamente o evento de cliques e restaurá-lo após 300 milissegundos:
# baidu {
display : block;
width : 100 % ;
height : 300 px ;
background-color : skyblue;
pointer-events : none;
} btn . addEventListener ( 'touchend' , ( ) => {
shade . style . display = 'none'
setTimeout ( ( ) => {
baidu . style . pointerEvents = 'auto' // 恢复正常
} , 300 ) ;
} ) Deixe os elementos ocultos atrasarem cerca de 300 milissegundos antes de escondê -los
btn . addEventListener ( 'touchend' , ( ) => {
setTimeout ( ( ) => {
shade . style . display = 'none'
} , 300 ) ;
} ) 
