Mobile Development
1.0.0
Fait référence à la longueur diagonale de l'écran, en pouces. Les tailles communes comprennent: 3,5 pouces, 4,0 pouces, 5,0 pouces, 5,5 pouces, 6,0 pouces, etc.
Remarque: 1 pouce (pouce) = 2,54 cm (cm)
Il se réfère au nombre total de points de pixels physiques sur l'écran dans les directions horizontales et verticales, qui est généralement représentée par n * m. Par exemple: la résolution d'écran de l'iPhone6 est: 750 * 1334
| modèle | Résolution (somme des pixels physiques) |
|---|---|
| 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 |
Également connu sous le nom de: densité de pixels d'écran, il fait référence au nombre de points de pixel physiques contenus dans chaque pouce de l'écran. L'unité est PPI (pixels par pouce). En fait, il y a une autre unité DPI (points par pouce). Les méthodes de calcul des deux valeurs sont les mêmes, mais les scénarios d'utilisation sont différents. PPI est principalement utilisé pour mesurer les écrans, et DPI est principalement utilisé pour mesurer les imprimantes, les projecteurs, etc.
Les pixels physiques, également appelés pixels d'appareil , sont une unité de longueur (PX). Un pixel physique est un point d'imagerie physique sur l'écran, qui est un minuscule composant physique luminescent (qui peut être simplement compris comme une super minuscule ampoule), qui est la granularité minimale que l'écran peut afficher. Le nombre physique de points de pixel (résolution) de l'écran est un paramètre important de l'écran du téléphone mobile et est déterminé par le fabricant d'écran et ne peut pas être modifié après la production . Par exemple, les pixels physiques de l'iPhone6 dans le sens horizontal sont de 750, et les pixels physiques qui ont dans la direction verticale sont 1334, qui est représenté par 750 * 1334.
Le pixel CSS est également connu sous le nom de: pixel logique. Le pixel CSS est une unité de longueur abstraite et l'unité est également PX. Il est créé pour que les développeurs Web mesurent avec précision la taille du contenu sur une page Web. Nous utilisons les pixels CSS en écrivant CSS JS moins.
Les pixels indépendants de l'appareil sont appelés DIP ou DP (pixel indépendant de l'appareil), également appelés: pixels indépendants de la densité de l'écran.
INTRODUCTION: À l'ère où [l'écran HD] n'est pas apparu, 1 pixel CSS correspond à 1 pixel physique, mais depuis l'émergence de [écran HD], les deux ne sont plus une relation 1 à 1. En 2010, Apple a lancé une nouvelle norme d'affichage: comprimer plus de points de pixels physiques dans un écran tandis que la taille de l'écran reste inchangée , de sorte que la résolution sera plus élevée et que l'effet d'affichage sera meilleur et plus délicat. Apple appelle cet écran: l'écran Retina (également connu sous le nom d'écran de rétine) , et a en même temps lancé le produit numérique de fabrication d'époches équipé de cet écran - l'iPhone 4.
Le programmeur a écrit: largeur = 2px, hauteur = 2px Box. Si un pixel CSS correspond directement à 1 pixel physique, car la taille de l'écran de l'iPhone3G / S et de l'iPhone4 est la même que celle de l'iPhone4, l'écran de l'iPhone4 peut accueillir plus de pixels physiques, de sorte que les pixels physiques de l'iPhone4 sont beaucoup plus petits que ceux de l'iPhone3G / s. En théorie, cette boîte sera beaucoup plus petite sur l'écran iPhone4 que sur l'écran iPhone3G / S. Le fait est que l'iPhone3G / S est de la même taille que l'iPhone4! ! ! , mais l'iPhone 4 est plus délicat et clair. Comment faire? Cela dépend des pixels indépendants de l'appareil. 
L'émergence de pixels indépendants de l'appareil fait que les éléments ont des tailles normales même sur l'écran [HD]. S rend le code non affecté par l'appareil. Il est défini par le fabricant d'appareils en fonction des caractéristiques de l'écran et ne peut pas être modifié.
Ratio de pixels (DPR, rapport des pixels de dispositif): le rapport de [Pixel physique] et [Pixel indépendant du dispositif] dans une seule direction. C'est-à-dire: dpr = pixels physiques / pixels indépendants de l'appareil
| modèle | Résolution (somme des pixels physiques) | Pixels indépendants de l'appareil (DIP ou DP) | Ratio de pixels (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://uiiiiii.com/screen/index.htm
Diagrammes de bitmap et de vecteur
Un pixel d'image un bit est également une unité de longueur. Un bit d'image Pixel peut être compris comme une "petite grille" dans un bitmap, qui est la plus petite unité d'un bitmap.
À l'heure actuelle, seul le logo doit être affiché en haute définition, ou le logo du format SVG peut être fourni pour résoudre le problème. Sinon, la requête multimédia est utilisée:
@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)
}
}Côté PC, la largeur par défaut de la fenêtre est la même que la largeur de la fenêtre du navigateur. Dans le document standard CSS, la fenêtre est également appelée: contenant initialement des blocs, qui est la cause profonde de tous les calculs de largeur de pourcentage CSS. Côté PC, la largeur peut être obtenue de la manière suivante:
console . log ( '最干净的显示区域' , document . documentElement . clientWidth ) ; // 常用
console . log ( '最干净的显示区域+滚动条' , window . innerWidth ) ;
console . log ( '最干净的显示区域+滚动条+浏览器边框' , window . outerWidth ) ;
console . log ( '与浏览器无关，当前设备显示分辨率横向的值' , screen . width ) ; Sur les appareils mobiles, les fabricants de navigateurs sont confrontés à un problème relativement important: comment présenter des dizaines de milliers, voire des centaines de millions de pages Web PC sur des appareils mobiles de manière complète sans barres de défilement horizontales? Ensuite, nous devons introduire trois concepts de terminaux mobiles: 1. Layout fenêtre, 2. Visual fenêtre, 3. Finion idéale
Utilisé pour résoudre le problème de l'affichage de la page en début sur les téléphones mobiles. Au début, nous avons fait ceci: la largeur des pages Web PC est généralement: 960px La plage de 1024px, même si elle dépasse cette plage, 960px La zone 1024px est toujours l'emplacement du corps principal.
Les fabricants de navigateurs ont conçu un conteneur pour les appareils mobiles. Tout d'abord, utilisez ce conteneur pour maintenir la page Web sur le PC. La largeur de ce conteneur est généralement de 980px . Différents appareils peuvent différer, mais la différence n'est pas importante. Ensuite, le conteneur est compressé également proportionnellement à la même largeur que le téléphone mobile, de sorte qu'il n'y a pas de barre de défilement et que la page puisse être entièrement présentée. Cependant, il y a encore des problèmes à le faire: le contenu de la page Web est compressé trop petit, ce qui affecte sérieusement l'expérience utilisateur.
Comment obtenir des fenêtres de mise en page sur le terminal mobile: document.documentElement.clientWidth (généralement 980px, iPad Pro est 1024px)
Remarque: Une fois la fenêtre de mise en page compressée, la largeur horizontale n'est plus 375px, mais 980px, car la fenêtre de mise en page est compressée, pas interceptée.
La fenêtre visuelle est la zone visible pour l'utilisateur. Sa largeur absolue est toujours aussi large que l'écran de l'appareil, mais la valeur des pixels CSS contenus dans cette largeur varie. Par exemple: Généralement, les téléphones mobiles mettront 980 pixels CSS dans la fenêtre visuelle (taille de la fenêtre visuelle = taille de la fenêtre de mise en page) , tandis que l'iPad Pro mettra 1024 pixels CSS dans la fenêtre visuelle.
La façon d'obtenir une fenêtre visuelle sur le terminal mobile: window.innerWidth , mais il ne peut pas être correctement obtenu dans Android 2, Opera Mini et UC8. (Généralement, la fenêtre visuelle n'est pas vue via le code)
Si vous prenez l'iPhone 6 à titre d'exemple, décrivez l'écran:
Une fenêtre de mise en page qui est égale à la largeur de l'écran (DP / DIP) est appelée fenêtre idéale, il peut également être dit qu'une fenêtre idéale est une norme: la largeur de la fenêtre de mise en page et l'écran (DP / DIP) sont obtenus par des balises MetA.
Méthodes spécifiques pour configurer une fenêtre idéale:
< meta name =" viewport " content =" width=device-width " >【Résumer】:
1. Description Écran: Pixels physiques: 750p ×, Pixels indépendants de l'appareil: 375px, pixels CSS: 980px. 2. Avantages: l'effet de rendu des éléments sur différents appareils est presque le même, car ils sont mis à l'échelle par des conteneurs de mise en page, tels que 200 boîtes larges: 200/980 3. Inconvénients: les éléments sont trop petits, le texte de la page n'est pas clair et l'expérience utilisateur n'est pas bonne.
1. Description Écran: Pixels physiques: 750px, Pixels indépendants de l'appareil: 375px, pixels CSS: 375px. 2. Avantages: La page est clairement affichée, le contenu n'est plus aussi petit que difficile à observer, et l'expérience utilisateur est meilleure. 3. Inconvénients: le même élément a des effets de rendu différents sur différents écrans (appareils). Par exemple, la boîte de 375 larges: 375/375 et 375/414 (affichage non égal à équivalent). 4. Comment le résoudre: faire l'adaptation.
Lors du zoom dans:
Réduisez la taille:
Processus d'algorithme: lors de l'agrandissement, le navigateur intercepte une certaine proportion de zone vers l'intérieur, puis remplit immédiatement l'image restante avec des proportions égales à l'ensemble de la fenêtre, et les éléments qui ne peuvent pas être abattus seront automatiquement emballés.
Script de surveillance:
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
// pc端， onresize监测的是视口的变化（初识包含块）
window . onresize = ( ) => {
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
} Lors du zoom dans:
Remarque: La mise à l'échelle mobile n'affectera pas la disposition de la page, car la taille de la fenêtre de mise en page ne change pas pendant la mise à l'échelle.
La balise Meta-Viewport a été introduite par Apple en 2007 pour contrôler la fenêtre de mise en page mobile, tentant de modifier les règles de l'industrie de la fenêtre de mise en page 980. Options liées à la fenêtre:
La valeur de largeur peut être de la largeur de l'appareil ou une valeur spécifique, mais certains téléphones Android ne prennent pas en charge la valeur spécifique, et la série iOS complète prend en charge
width=device-width, initial-scale=1.0 est écrite ensemble.Échelle maximale autorisée pour la mise à l'échelle des utilisateurs [Safari ne prend pas en charge] maximum-échelle = largeur d'écran (pixels indépendants, dip) / largeur de la fenêtre visuelle
Échelle maximale qui permet à l'utilisateur de mettre à l'échelle la largeur de l'écran minimum = (DIP Independent Pixels, DIP) / Visual Finport Largeth
Que ce soit pour permettre aux utilisateurs de zoomer la page à travers leurs doigts [Safari ne prend pas en charge]
Le réglage de la couverture peut résoudre le problème de l'espace blanc dans [Écran 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. Pourquoi avez-vous besoin de vous adapter? En raison des différentes tailles d'écran des appareils mobiles, il y aura: le même élément affichera des effets différents sur deux téléphones différents (proportions différentes). Si le même élément est affiché sur différents appareils, il doit être adapté. Peu importe la méthode d'adaptation utilisée, le principe central est toujours: comparaison égale!
Il existe trois méthodes d'adaptation traditionnelles:
EM et REM sont les deux unités de longueur dans CSS. Et les deux sont des unités de longueur relative, mais les deux sont un peu différents
Dans la fenêtre idéale, le projet de conception (DIP est de 375px) est utilisé comme standard et la police racine est de 100px pour correspondre à la DIP des autres appareils.
Dans la fenêtre idéale, définissez la police racine sur DIP / 10, c'est-à-dire comparer la trempette à 10 REM, compte tenu du nombre d'éléments internes occupés
1 VW = 1% de la largeur de la fenêtre de mise en page 2 VH = 1% de la hauteur de la fenêtre de mise en page
Afficher la compatibilité: canuse.com
1px dans l'écran HD correspond à plus de pixels physiques (petites ampoules), de sorte que la bordure de 1 pixel est plus épaisse. La solution est la suivante:
@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;
}
}Liste d'événements mobiles
Les événements ci-dessus sont apparus pour la première fois dans iOS Safari pour transmettre des informations spéciales aux développeurs
Avis:
Une fois l'événement tactile terminé, l'événement de clic de l'élément sera déclenché par défaut. Si la fenêtre parfaite n'est pas définie, l'intervalle de temps pour l'événement est d'environ 300 ms. Si la fenêtre parfaite est définie, l'intervalle de temps est d'environ 30 ms (selon les caractéristiques spécifiques de l'appareil).
Si l'événement tactile fait masquer l'élément, l'action de clic agira sur l'élément derrière, déclenchant l'événement de clic ou le saut de page du nouvel élément. Ce phénomène est appelé la pénétration de clics .
Bloquer le comportement par défaut
btn . addEventListener ( 'touchend' , ( event ) => {
event . preventDefault ( )
shade . style . display = 'none'
} ) Faites en sorte que les éléments dans les coulisses ne soient pas des caractéristiques de clic et les modifier sur des balises div normales:
< div id =" baidu " >点我去百度</ div >Utilisez l'événement TouchenD et cliquez pour passer à la nouvelle page Web
baidu . addEventListener ( 'touchend' , ( ) => {
window . location . href = 'https://www.baidu.com'
} ) Utilisez l'attribut Pointer-Events dans CSS pour perdre temporairement l'événement de clic et le restaurer après 300 millisecondes:
# 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 ) ;
} ) Laissez les éléments cachés retarder d'environ 300 millisecondes avant de les cacher
btn . addEventListener ( 'touchend' , ( ) => {
setTimeout ( ( ) => {
shade . style . display = 'none'
} , 300 ) ;
} ) 
