Mobile Development
1.0.0
Bezieht sich auf die diagonale Länge des Bildschirms in Zoll. Gemeinsame Größen umfassen: 3,5 Zoll, 4,0 Zoll, 5,0 Zoll, 5,5 Zoll, 6,0 Zoll usw.
Hinweis: 1 Zoll (Zoll) = 2,54 cm (cm)
Es bezieht sich auf die Gesamtzahl der physikalischen Pixelpunkte auf dem Bildschirm in den horizontalen und vertikalen Richtungen, die im Allgemeinen durch N * m dargestellt werden. Zum Beispiel: Die Bildschirmauflösung von iPhone6 lautet: 750 * 1334
| Modell | Auflösung (Summe der physischen Pixel) |
|---|---|
| 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 |
Auch bekannt als: Bildschirmpixeldichte, bezieht es sich auf die Anzahl der in jedem Zoll auf dem Bildschirm enthaltenen physikalischen Pixelpunkten . Das Gerät ist PPI (Pixel pro Zoll). Tatsächlich gibt es einen weiteren DPI der Einheit (Punkte pro Zoll). Die Berechnungsmethoden der beiden Werte sind gleich, aber die Verwendungsszenarien sind unterschiedlich. PPI wird hauptsächlich zum Messen von Bildschirmen verwendet, und DPI wird hauptsächlich zum Messen von Druckern, Projektoren usw. verwendet.
Physikalische Pixel, auch als Gerätepixel bekannt , sind eine Längeeinheit (PX). Ein physikalisches Pixel ist ein physikalischer Bildgebungspunkt auf dem Bildschirm, einer winzigen physikalischen Komponente (die einfach als super winzige Glühbirne verstanden werden kann), die die minimale Granularität ist, die der Bildschirm anzeigen kann. Die physische Anzahl von Pixelpunkten (Auflösung) des Bildschirms ist ein wichtiger Parameter des Mobiltelefonbildschirms und wird vom Bildschirmhersteller bestimmt und kann nach der Produktion nicht geändert werden . Zum Beispiel betragen die physikalischen Pixel, die das iPhone6 in horizontaler Richtung hat, 750, und die physikalischen Pixel, die in vertikaler Richtung aufweisen, sind 1334, die durch 750*1334 dargestellt werden.
CSS -Pixel ist auch als: logisches Pixel bekannt. Das CSS -Pixel ist eine abstrakte Längeeinheit, und das Gerät ist auch PX. Es wird für Webentwickler erstellt, um die Inhaltsgröße auf einer Webseite genau zu messen. Wir verwenden CSS -Pixel beim Schreiben von CSS JS weniger.
Gerätsunabhängige Pixel werden als DIP oder DP (Gerätsunabhängiges Pixel) bezeichnet, auch bekannt als: Bildschirmdichteunabhängige Pixel.
Einführung: In der Zeit, in der [HD-Bildschirm] nicht erschien, entspricht 1 CSS-Pixel 1 physikalischem Pixel, aber da die Entstehung von [HD-Bildschirm] jedoch keine 1-zu-1-Beziehung mehr sind. Im Jahr 2010 hat Apple einen neuen Display -Standard: Kompress mehr physikalische Pixelpunkte in einen Bildschirm gestartet, während die Bildschirmgröße unverändert bleibt , sodass die Auflösung höher ist und der Display -Effekt besser und empfindlicher wird. Apple ruft diesen Bildschirm auf: Retina -Bildschirm (auch als Retina -Bildschirm bezeichnet) und gleichzeitig das mit diesem Bildschirm ausgestattete digitale Produkt von Epocher -Herstellung - das iPhone 4.
Der Programmierer schrieb: width = 2px, Höhe = 2px Box. Wenn ein CSS -Pixel 1 physischem Pixel direkt entspricht, da die Bildschirmgröße von iPhone3G/s und iPhone4 den gleichen wie der von iPhone4 entspricht, kann der Bildschirm von iPhone4 mehr physische Pixel aufnehmen, sodass die physischen Pixel von iPhone4 viel kleiner sind als die von iPhone3G/s. Theoretisch ist diese Box auf dem iPhone4 -Bildschirm viel kleiner als auf dem iPhone3G/s -Bildschirm. Tatsache ist, dass iPhone3G/s die gleiche Größe hat wie iPhone4! ! ! , aber das iPhone 4 ist empfindlicher und klarer. Wie macht ich das? Dies hängt von den unabhängigen Pixeln des Geräts ab. 
Durch das Auftreten unabhängiger Pixel des Geräts haben Elemente auch auf dem [HD -Bildschirm] normale Größen. S macht den Code nicht vom Gerät betroffen. Es wird vom Gerätehersteller gemäß den Bildschirmeigenschaften festgelegt und kann nicht geändert werden.
Pixelverhältnis (DPR, Gerätepixelverhältnis): das Verhältnis von [physikalischem Pixel] und [Gerätesunabhängiges Pixel] in eine einzelne Richtung. Das heißt: DPR = Physikalische Pixel/Geräteunabhängige Pixel
| Modell | Auflösung (Summe der physischen Pixel) | Geräteunabhängige Pixel (DIP oder DP) | Pixelverhältnis (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
Bitmap- und Vektordiagramme
Ein Bitbildpixel ist auch eine Längeeinheit. Ein Bit -Bild -Pixel kann als "kleines Gitter" in einer Bitmap verstanden werden, die die kleinste Einheit einer Bitmap ist.
Gegenwärtig muss nur das Logo in hoher Definition angezeigt werden, oder das SVG -Format -Logo kann bereitgestellt werden, um das Problem zu lösen. Andernfalls wird Medienabfrage verwendet:
@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)
}
}Auf der PC -Seite entspricht die Standardbreite des Ansichtsfensters der Breite des Browserfensters. Im CSS -Standarddokument heißt das Ansichtsfenster auch: zunächst Blöcke enthalten, was die Hauptursache für alle prozentualen CSS -Breitenberechnungen ist. Auf der PC -Seite kann die Breite auf folgende Weise erhalten werden:
console . log ( '最干净的显示区域' , document . documentElement . clientWidth ) ; // 常用
console . log ( '最干净的显示区域+滚动条' , window . innerWidth ) ;
console . log ( '最干净的显示区域+滚动条+浏览器边框' , window . outerWidth ) ;
console . log ( '与浏览器无关，当前设备显示分辨率横向的值' , screen . width ) ; Auf mobilen Geräten stehen Browserhersteller vor einem relativ großen Problem: Wie präsentieren sie Zehntausende, auch Hunderte Millionen von PC -Webseiten auf mobilen Geräten auf komplette Weise ohne horizontale Schriftrollenbalken? Dann müssen wir drei Konzepte mobiler Terminals einführen: 1. Layout -Ansichtsfenster, 2. Visuelles Ansichtsfenster, 3. Ideales Ansichtsfenster
Wird verwendet, um das Problem der frühen Seitenanzeige auf Mobiltelefonen zu lösen. In den frühen Tagen haben wir Folgendes gemacht: Die Breite der PC -Webseiten ist im Allgemeinen: 960px Der Bereich von 1024px, auch wenn er diesen Bereich überschreitet, 960px Der 1024px -Bereich ist immer noch die Position des Hauptkörpers.
Browserhersteller haben einen Container für mobile Geräte entworfen. Verwenden Sie zunächst diesen Container, um die Webseite auf dem PC zu halten. Die Breite dieses Behälters beträgt im Allgemeinen 980px . Verschiedene Geräte können unterschiedlich sein, aber der Unterschied ist nicht groß. Anschließend ist der Container gleich proportional proportional zur gleichen Breite wie das Mobiltelefon komprimiert, sodass es keine Scroll -Leiste gibt und die Seite vollständig dargestellt werden kann. Dies gibt jedoch immer noch Probleme: Der Inhalt der Webseite ist zu klein komprimiert, was die Benutzererfahrung ernsthaft beeinflusst.
So erhalten Sie Layout -Ansichtsfenster am mobilen Terminal: document.documentElement.clientWidth (normalerweise 980px, iPad Pro ist 1024px)
Hinweis: Nachdem das Layout -Ansichtsfenster komprimiert wurde, beträgt die horizontale Breite nicht mehr 375px, sondern 980px, da das Layout -Ansichtsfenster komprimiert und nicht abgefangen wird.
Das visuelle Ansichtsfenster ist der Bereich, der für den Benutzer sichtbar ist. Die absolute Breite ist immer so breit wie der Gerätebildschirm, aber der Wert der in dieser Breite enthaltenen CSS -Pixel variiert. Zum Beispiel: Im Allgemeinen geben Mobiltelefone 980 CSS -Pixel in das visuelle Ansichtsfenster (visuelle Ansichtsfenstergröße = Layout -Ansichtsfenstergröße) , während iPad Pro 1024 CSS -Pixel in das visuelle Ansichtsfenster einfügt.
Der Weg, um ein visuelles Ansichtsfenster am mobilen Terminal zu erhalten: window.innerWidth . (Im Allgemeinen wird das visuelle Ansichtsfenster nicht über den Code betrachtet)
Wenn Sie das iPhone 6 als Beispiel einnehmen, beschreiben Sie den Bildschirm:
Ein Layout -Ansichtsfenster, das der Breite des Bildschirms (DP/DIP) entspricht, wird als ideales Ansichtsfenster bezeichnet. Daher kann auch gesagt werden, dass ein ideales Ansichtsfenster ein Standard ist: Das Layout -Ansichtsfenster und der Bildschirm (DP/DIP) werden von Meta -Tags erreicht.
Spezifische Methoden zur Einrichtung eines idealen Ansichtsfenfers:
< meta name =" viewport " content =" width=device-width " >【Zusammenfassen】:
1. Beschreibung Bildschirm: Physikalische Pixel: 750p ×, unabhängige Pixel von Gerät: 375px, CSS -Pixel: 980px. 2. Vorteile: Der Rendering -Effekt von Elementen auf verschiedene Geräte ist nahezu gleich, da sie durch Layoutcontainer wie 200 breite Boxen skaliert werden: 200/980 3. Nachteile: Die Elemente sind zu klein, der Seitentext ist unklar und die Benutzererfahrung ist nicht gut.
1. Beschreibung Bildschirm: Physikalische Pixel: 750px, unabhängige Pixel mit Geräten: 375px, CSS -Pixel: 375px. 2. Vorteile: Die Seite wird deutlich angezeigt, der Inhalt ist nicht mehr so klein wie schwer zu beobachten, und die Benutzererfahrung ist besser. 3. Nachteile: Das gleiche Element hat unterschiedliche Rendering -Effekte auf verschiedenen Bildschirmen (Geräte). Zum Beispiel die 375-weite Box: 375/375 und 375/414 (nicht gleichberechtigte Anzeige). 4. Wie man es löst: Anpassung vornehmen.
Beim Zoomen::
Reduzieren Sie die Größe:
Algorithmusprozess: Beim Vergrößern fängt der Browser einen bestimmten Bereich des Bereichs nach innen ab und füllt dann das verbleibende Bild sofort mit gleichen Anteilen zum gesamten Ansichtsfenster, und die Elemente, die nicht abgelegt werden können, werden automatisch eingeschlossen.
Überwachungsskript:
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
// pc端， onresize监测的是视口的变化（初识包含块）
window . onresize = ( ) => {
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
} Beim Zoomen::
Hinweis: Die mobile Skalierung wirkt sich nicht auf das Seitenlayout aus, da sich die Größe der Layout -Ansichtsfenster während der Skalierung nicht ändert.
Das Meta-Viewport-Tag wurde 2007 von Apple eingeführt, um das Ansichtsfenster für mobiles Layout zu kontrollieren, und versuchte, die Branchenregeln des 980-Layout-Ansichtsfensters zu ändern. Ansichtsfensterbezogene Optionen:
Der Breitenwert kann Gerätebreiten oder einen bestimmten Wert sein, aber einige Android-Telefone unterstützen keinen bestimmten Wert, und die vollständige iOS-Serie unterstützt nicht
width=device-width, initial-scale=1.0 wird zusammen geschrieben.Maximale Skala für die Skalierung der Benutzer [Safari unterstützt nicht] Maximal-Scale = Bildschirmbreite (DIP-unabhängige Pixel, Dip) / visuelles Ansichtsfensterbreite
Maximale Skala, mit der der Benutzer minimale Maßstäbe = Bildschirmbreite (DIP-unabhängige Pixel, Dip) / visuelle Ansichtsfensterbreite ermöglicht werden kann
Ob Benutzer die Seite über die Finger zoomen können [Safari unterstützt nicht]
Die Einstellung zur Abdeckung kann das Problem des White -Space im [Notch -Bildschirm] lösen
< 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. Warum müssen Sie sich anpassen? Aufgrund der verschiedenen Bildschirmgrößen von mobilen Geräten wird es geben: Das gleiche Element zeigt unterschiedliche Effekte auf zwei verschiedene Telefone (unterschiedliche Proportionen). Wenn das gleiche Element auf verschiedenen Geräten angezeigt wird, muss es angepasst werden. Unabhängig davon, welche Anpassungsmethode verwendet wird, ist das zentrale Prinzip immer: Gleicher Vergleich!
Es gibt drei Mainstream -Anpassungsmethoden:
EM und REM sind beide Längeneinheiten in CSS. Und beide sind relative Längeneinheiten, aber die beiden sind etwas anders
Unter dem idealen Ansichtsfenster wird der Entwurfsentwurf (DIP beträgt 375px) als Standard und die Root -Schrift ist 100px, um dem Dip anderer Geräte zu entsprechen.
Stellen Sie im idealen Ansichtsfenster die Root -Schriftart auf ein DIP/10 ein, dh den Dip mit 10 REM, wenn Sie bedenken, wie viele interne Elemente besetzt sind
1 VW = 1% der Layout -Ansichtsfenster 2 VH = 1% der Layout -Ansichtsfensterhöhe
Kompatibilität anzeigen: caniuse.com
1px im HD-Bildschirm entspricht mehr physikalischen Pixeln (kleine Glühbirnen), sodass der 1-Pixel-Rand dicker aussieht. Die Lösung lautet wie folgt:
@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;
}
}Mobile Ereignisliste
Die oben genannten Ereignisse erschienen erstmals in iOS Safari, um Entwicklern einige spezielle Informationen zu vermitteln
Beachten:
Nach Abschluss des Touch -Ereignisses wird das Klickereignis des Elements standardmäßig ausgelöst. Wenn das perfekte Ansichtsfenster nicht festgelegt ist, beträgt das Zeitintervall für die Veranstaltung etwa 300 ms. Wenn das perfekte Ansichtsfenster festgelegt ist, beträgt das Zeitintervall etwa 30 ms (abhängig von den spezifischen Geräteeigenschaften).
Wenn das Touch -Ereignis dazu führt, dass das Element versteckt ist, wirkt die Klickaktion auf das Element dahinter und löst das Klickereignis oder den Seitensprung des neuen Elements aus. Dieses Phänomen wird als Klick -Penetration bezeichnet.
Blockieren Sie das Standardverhalten
btn . addEventListener ( 'touchend' , ( event ) => {
event . preventDefault ( )
shade . style . display = 'none'
} ) Machen Sie die Elemente hinter den Kulissen keine Klickeigenschaften und ändern Sie sie zu normalen Div -Tags:
< div id =" baidu " >点我去百度</ div >Verwenden Sie das Touchend -Ereignis und klicken Sie, um zur neuen Webseite zu springen
baidu . addEventListener ( 'touchend' , ( ) => {
window . location . href = 'https://www.baidu.com'
} ) Verwenden Sie das Attribut für Zeiger-Events in CSS, um das Klickereignis vorübergehend zu verlieren und es nach 300 Millisekunden wiederherzustellen:
# 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 ) ;
} ) Lassen Sie die versteckten Elemente die Verzögerung der Verzögerung von etwa 300 Millisekunden, bevor Sie sie verstecken
btn . addEventListener ( 'touchend' , ( ) => {
setTimeout ( ( ) => {
shade . style . display = 'none'
} , 300 ) ;
} ) 
