Compétences essentielles pour le développement de téléphones mobiles : compétences en partage de code de fonction javascript et CSS_javascript

1. fenêtre d'affichage :

C'est la zone visible. Pour les navigateurs de bureau, nous savons tous ce qu'est une fenêtre d'affichage, qui est la zone utilisée pour afficher les pages Web après avoir supprimé toutes les barres d'outils, barres d'état, barres de défilement, etc.
C’est le domaine dans lequel cela fonctionne vraiment. Étant donné que la largeur de l'écran des appareils mobiles est différente de celle du Web traditionnel, nous devons modifier la fenêtre d'affichage ;

En fait, il y a 4 attributs que nous pouvons exploiter :

Copier le code Le code est le suivant :

width - // largeur de la fenêtre d'affichage (plage de 200 à 10 000, 980 pixels par défaut)
height - // hauteur de la fenêtre (plage de 223 à 10 000)

initial-scale - // Mise à l'échelle initiale (allant de > 0 à 10)

minimum-scale - // Échelle minimale sur laquelle l'utilisateur est autorisé à zoomer
maximum-scale - // Le rapport maximum sur lequel l'utilisateur est autorisé à zoomer

user-scalable - // Indique si l'utilisateur peut réduire manuellement (non, oui)

Alors, comment ces paramètres le informent-ils exactement ? C'est en fait très simple, juste une méta, sous la forme :

Copier le code Le code est le suivant :

//Encodage

// Une autre astuce pour les applications hors ligne
//Le style de la barre d'état en haut de Safari dans l'iphone spécifié   
//Dites à l'appareil d'ignorer les numéros sur la page en tant que numéros de téléphone


Après avoir défini initial-scale=1, nous pouvons enfin concevoir la page avec un rapport 1:1. Concernant la fenêtre d'affichage, un autre concept très important est le suivant : le navigateur Safari de l'iPhone n'a pas de barre de défilement du tout, et ce n'est pas un simple "masquer la barre de défilement", il n'a pas du tout cette fonction. Le navigateur Safari de l'iPhone affiche en fait la page Web dans son intégralité depuis le début, puis utilise la fenêtre d'affichage pour en afficher une partie. Lorsque vous faites glisser avec votre doigt, vous ne faites pas glisser la page, mais la fenêtre. Le changement de comportement du navigateur ne se limite pas à la barre de défilement, les événements d'interaction sont également différents de ceux du bureau ordinaire.

2. lien :

Copier le code Le code est le suivant :

// Définir l'image de la page de démarrage

// Vous pouvez afficher de belles icônes lors de la définition de signets
// Style du mode Portrait

//Style utilisé pour l'écran vertical


//Style utilisé en mode paysage

3. Événement :

Copier le code Le code est le suivant :

//Événement gestuel
touchstart //Déclenché lorsqu'un doigt touche l'écran
touchmove //Déclenché lorsque le doigt qui a touché l'écran commence à bouger
touchend //Déclenché lorsque le doigt quitte l'écran
toucher annuler

//Événement tactile
gestestart //Déclenché lorsque deux doigts touchent l'écran
GesteChange // Déclenché lorsque deux doigts touchent l'écran et commencent à bouger
gestefin

//Événement de rotation d'écran
sur le changement d'orientation

// Détecter quand le doigt touchant l'écran change de direction 
changement d'orientation 

//Attributs associés pris en charge par l'événement tactile
touche 
ciblesTouches
changéTouches                                                                                                clientX　　　// Coordonnée X du toucher par rapport à la fenêtre d'affichage (exclut le décalage de défilement)  
clientY　　　// Coordonnée Y du toucher par rapport à la fenêtre (exclut le décalage de défilement)  
screenX　 // Par rapport à l'écran   
screenY // Par rapport à l'écran
pageX　　　　// Par rapport à la page entière (inclut le défilement)  
pageY　　　 // Par rapport à la page entière (inclut le défilement) 
target　　 // Nœud d'où provient l'événement tactile  
identifiant　 // Un numéro d'identification, unique à chaque événement tactile

4. Événement de rotation d'écran : onorientationchange Ajoutez l'écoute d'un événement de rotation d'écran pour découvrir l'état de rotation de l'écran (rotation à gauche, rotation à droite ou aucune rotation) à tout moment. Exemple :

Copier le code Le code est le suivant :

// Détermine si l'écran est pivoté
function orientationChange() {
commutateur (fenêtre.orientation) {
Cas 0 :
                 alert("Mode portrait 0, largeur d'écran : " screen.width " ; hauteur d'écran : " screen.height
);               pause ; Cas -90 :
alert("Rotation vers la gauche -90,screen-width : " screen.width " ; screen-height : " screen.height );               pause ; Cas 90 :
                    alert("Rotation à droite 90, largeur d'écran : " screen.width " ; hauteur d'écran : " screen.height
);               pause ; Cas 180 :
alert("Mode paysage 180,screen-width : " screen.width "; screen-height :" screen.height); Pause
};
};
//Ajouter un écouteur d'événement
addEventListener('load', function(){
orientationChange();
​ window.onorientationchange = orientationChange;
});




5. Masquer la barre d'adresse et empêcher la barre de défilement d'apparaître lors de la gestion des événements :

Copier le code

Le code est le suivant : // Masquer la barre d'adresse & empêcher la barre de défilement d'apparaître lors de la gestion des événements addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100); });

6. Événement de glisse à deux doigts :

Copier le code

Le code est le suivant :

// Événement de glisse à deux doigts
addEventListener('load', Function(){ window.onmousewheel = twoFingerScroll;},
                                                                                                                                             // Compatible avec tous les navigateurs, signifie que le gestionnaire d'événements est appelé pendant la phase de bouillonnement (phase de capture réelle)
);
fonction twoFingerScroll(ev) {
var delta =ev.wheelDelta/120; var delta =ev.wheelDelta/120; //Jugez la valeur delta (telle que positive ou négative), puis effectuez l'opération correspondante
Renvoie vrai ;
};

7. Déterminez s'il s'agit d'un iPhone :

Copier le code Le code est le suivant :

// Déterminer s'il s'agit d'un iPhone :
fonction isAppleMobile() {
Retour (navigator.platform.indexOf('iPad') != -1); };

8.Stockage local :

Exemple : (Notez que le nom des données n doit être placé entre guillemets)

Copier le code Le code est le suivant :

var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // Si les données portant le nom n existent, lisez-les et attribuez-les à la variable v .
localStorage.setItem('n', v);                                                                                                                                            localStorage.removeItem('n');                                                                                


9. Utilisez des liens spéciaux :

Si vous désactivez la reconnaissance automatique et souhaitez que certains numéros de téléphone soient liés à la fonction de numérotation de l'iPhone, vous pouvez déclarer le lien téléphonique comme ceci,

Copier le code Le code est le suivant : Appelle-moi

Envoyer un SMS

Ou pour les cellules :

Copier le code Le code est le suivant :

10. Capitalisation automatique et correction automatique

Pour désactiver ces deux fonctionnalités, vous pouvez utiliser les options de mise en majuscule et de correction automatique :

Copier le code Le code est le suivant :

11. WebKit CSS :

① Le « modèle de boîte » décrit spécifiquement le contenu du bloc de boîte englobante, y compris les bordures, le remplissage, etc.

Copier le code Le code est le suivant : -webkit-border-bottom-left-radius : rayon ;

-webkit-border-top-left-radius : horizontal_radius vertical_radius ;

-webkit-border-radius: radius; //Coins arrondis du conteneur
-webkit-box-sizing : sizing_model ; valeur constante de bordure : border-box/content-box
-webkit-box-shadow : couleur de flou hoff voff ; //Ombre du conteneur (les paramètres sont : décalage horizontal de la direction X ; décalage vertical de la direction Y ; valeur du rayon de flou gaussien ; valeur de la couleur de l'ombre)
-webkit-margin-bottom-collapse :effondrement_behavior ; Valeur constante : réduire/rejeter/séparer
-webkit-margin-start : largeur ;
-webkit-padding-start : largeur ;
-webkit-border-image : url(borderimg.gif) 25 25 25 25 rond/étirement rond/étirement ;
-webkit-apparence : bouton-poussoir ; //Performances CSS intégrées, ne prend actuellement en charge que le bouton-poussoir


②Le « modèle de formatage visuel » décrit les propriétés et détermine la position et la taille des éléments de bloc.

Copier le code Le code est le suivant :

direction : rtl
unicode-bidi : bidi-override ; constante : bidi-override/embed/normal

③ « Effets visuels » décrit les attributs et ajuste le contenu du bloc d'effets visuels, y compris le comportement de débordement, le comportement d'ajustement, la visibilité, l'animation, la transformation et la transition.

Copier le code Le code est le suivant :

clip : rect(10px, 5px, 10px, 5px)
redimensionner : auto ; constante : auto/les deux/horizontal/aucun/vertical
visibilité : visible ; constante : réduire/caché/visible
-webkit-transition : opacité 1s linéaire ; effet d'animation facilité/linéaire/facilité d'entrée/facilité de sortie/facilité d'entrée
-webkit-backface-visibility : visibler ; Constante : visible (valeur par défaut)/caché
-webkit-box-reflect : droite 1px ; Miroir inversé
-webkit-box-reflect : en dessous de 4px -webkit-gradient(linéaire, en haut à gauche, en bas à gauche,
de(transparent), color-stop(0.5, transparent), à(blanc));
-webkit-mask-image : -webkit-gradient(linéaire, en haut à gauche, en bas à gauche, de(rgba(0,0,0,1)), à(rgba(0,0,0,0)));; //Masque CSS/effet masque
-webkit-mask-attachment : corrigé ; Constante : corrigée/défilement
-webkit-perspective : valeur ; Constante : aucune (par défaut)
-webkit-perspective-origin : en haut à gauche ;
-webkit-transform : rotation(5deg);
-webkit-transform-style : preserve-3d ; constante : flat/preserve-3d (2D et 3D)

④L'attribut de description « Générer du contenu, une numérotation automatique et une liste » vous permet de modifier un composant du contenu, de créer des chapitres et des titres numérotés automatiquement et de manipuler le style de liste du contenu.

Copier le code Le code est le suivant :

contenu : Compteur « Article » (section) « « ;
Cela réinitialise le compteur.
Première section
>deux sections
trois sections
contre-incrément : section 1;
compteur-réinitialisation : section ;

⑤ « Support de pagination » décrit les propriétés de performances et d'apparence, contrôlant le comportement des versions imprimées des pages Web, telles que les sauts de page.

Copier le code Le code est le suivant :

saut de page après : auto ; Constante : toujours/auto/éviter/gauche/droite
saut de page avant : auto ; Constante : toujours/auto/éviter/gauche/droite
page-break-inside : auto ; Constante : auto/éviter

⑥L'attribut de description « Couleur et arrière-plan » contrôle l'arrière-plan des éléments au niveau du bloc et la couleur des composants du contenu du texte.

Copier le code Le code est le suivant :

-webkit-background-clip : contenu ; Constante : border/content/padding/text
-webkit-background-origin : remplissage ; Constante : border/content/padding/text
-webkit-background-size : 55px ; Constante : length/length_x/length_y

⑦ « Police » est un facteur qui décrit spécifiquement la nature de la sélection de la police du texte. Le rapport décrit également les propriétés utilisées pour télécharger les définitions de polices.

Copier le code Le code est le suivant :

plage unicode : U 00-FF, U 980-9FF ;

⑧ « Texte » décrit le style de texte spécifique, l'espacement et le défilement automatique des attributs.

Copier le code Le code est le suivant :

texte-ombre : #00FFFC 10px 10px 5px ;
transformation de texte : majuscule ; constante : majuscule/minuscule/aucun/majuscule
retour à la ligne : mot de rupture ; constante : mot de rupture/normal
-webkit-marquee : droit grand infini normal 10 s ; Constantes : direction (direction) incrément (nombre d'itérations) répétition (répétition) style (style) vitesse (vitesse) ; -webkit-marquee-direction : avance/auto/arrière/bas/avant/gauche/arrière/droite/haut
-webkit-marquee-incrementt : 1-n/infini (temps infinis)
-webkit-marquee-speed : rapide/normal/lent
-webkit-marquee-style : alternatif/aucun/scroll/slide
-webkit-text-fill-color : #ff6600 ; Constantes : majuscule, minuscule, aucune, majuscule
-webkit-text-security : cercle ; Constante : cercle/disque/aucun/carré
-webkit-text-size-adjust : aucun ; constante : auto/aucun ; -webkit-text-AVC : 15px #fff;
-webkit-line-break : après un espace blanc ; Constante : normal/après un espace blanc
-apparence du webkit : indicateur de verrouillage des majuscules ;
-webkit-nbsp-mode : espace ; Constante : normal/espace
-webkit-rtl-ordering : logique ; Constante : visuelle/logique
-webkit-user-drag : élément ; constante : élément/auto/none
-webkit-user-modify : lecture seule ; Constante : lecture-écriture-texte brut uniquement/lecture-écriture/lecture seule
-webkit-user-select : texte ; Constante : texte/auto/aucun


⑨ « Tableau » décrit la présentation et le contenu spécifique du tableau des performances de conception.

Copier le code Le code est le suivant :

-webkit-border-horizontal-spacing : 2px;

-webkit-border-vertical-spacing : 2px;
-webkit-column-break-after : right ; Constante : toujours/auto/éviter/gauche/droite
-webkit-column-break-before : right ; Constante : toujours/auto/éviter/gauche/droite
–webkit-column-break-inside : logique ; Constante : éviter/auto
-webkit-column-count : 3 ; //Colonne
-webkit-column-rule : 1px solide #fff;
style : pointillé, pointillé, double, rainure, caché, encart, aucun, début, crête, solide


⑩L'attribut de description « interface utilisateur » implique des éléments de l'interface utilisateur dans le navigateur, tels que les zones de texte défilantes, les barres de défilement, etc. Le rapport décrit également les propriétés en dehors de la portée du contenu de la page, telles que le style de légende du curseur et son affichage lorsque vous maintenez la touche

Cible, comme un lien sur un iPhone.

Copier le code Le code est le suivant :

-webkit-box-align : ligne de base, centre, fin, début, étirement constante : baseline/center/end/start/stretch

-webkit-box-direction : normal constante : normal/inverse
-webkit-box-flex : flex_valuet
-webkit-box-flex-group : numéro_groupe
-webkit-box-lines : multiple ; Constante : multiple/single
-webkit-box-ordinal-group : numéro_groupe
-webkit-box-orient : bloc-axe ; Constante : bloc-axe/horizontal/inline-axis/vertical/orientation
–webkit-box-pack : alignement ; constante : centre/fin/justifier/début

12. Transition d'animation

C'est la fonctionnalité la plus innovante de Webkit : définir des animations à l'aide de fonctions de transition.

Copier le code Le code est le suivant :

-webkit-animation : titre facilité d'entrée-sortie infinie 3s ;

l'animation a ces attributs :
-webkit-animation-name : //Le nom de l'attribut correspond aux images clés que nous avons définies
-webkit-animation-durée : 3s //Durée
-webkit-animation-timing-function : //Type de transition : facilité/linéaire (linéaire) /ease-in (lent à rapide) /ease-out (rapide à lent) /ease-in-out (lent à rapide puis encore une fois lent) /cubic-bezier
-webkit-animation-delay : 10 ms //Délai d'animation (par défaut 0)
-webkit-animation-iteration-count : //Nombre de boucles (par défaut 1), l'infini est infini
-webkit-animation-direction : //Mode d'animation : normal (lecture avant par défaut) ; alternatif (direction alternée, lecture avant paire, lecture arrière impaire)


Ceux-ci peuvent également être abrégés. Mais ce qui me fait vraiment du bien, ce sont les images clés, qui peuvent définir un processus de transformation d'animation pour l'appel, le processus va de 0% à 100% ou de (0%) à (100%). Pour faire simple, tant que vous avez une idée, il est très simple de savoir comment vous souhaitez que les éléments changent au cours du processus.

Copier le code Le code est le suivant :

-webkit-transform : type (traduction échelle/rotation/inclinaison/déplacement)
grossissement de l'échelle (num,num). scaleX et scaleY(3), peuvent être abrégés comme suit : scale(*, *)
rotation (*deg) angle de rotation. rotateX et rotateY peuvent être abrégés comme suit : rotate(*, *)
Inclinaison(*deg) Angle d'inclinaison. skewX et skewY peuvent être abrégés comme suit : skew(*, *)
Translate(*,*) coordonner le mouvement. traduireX et traduireY peuvent être abrégés comme suit : traduire(*, *).

Exemple d'implémentation d'une boîte de message pop-up simulée (Alerte) :
① Définir la transition (décrire les images clés dans le paragraphe