1. Lorsque vous regardez l'image d'arrière-plan avec un navigateur Android, certains appareils seront flous.
Il est très clair sur un PC avec la même proportion d'images, mais il est très flou au téléphone. Quelle est la raison?
Après la recherche, c'est le dispositifPixelratio qui a causé le problème. Parce que la résolution du téléphone mobile est trop petite, si la page Web s'affiche en fonction de la résolution, les mots seront très petits. Apple a donc initialement affiché la résolution du 960640 de l'iPhone 4 sur la page Web, donc devicePixelRatio = 2. Maintenant, Android est assez désordonné, avec 1,5, 2 et 3.
Si vous souhaitez que l'image soit affichée plus clairement sur votre téléphone, vous devez utiliser une image d'arrière-plan 2x au lieu de la balise IMG (généralement, 2 fois). Par exemple, la largeur et la hauteur d'une div sont 100100, l'image d'arrière-plan doit être 200200, puis la taille de l'arrière-plan: contienne;, de sorte que l'image affichée sera plus claire.
Le code peut être le suivant:
Contexte: URL (../ Images / icon / all.png) Centre de centre sans répétition; -Webkit-Background-Size: 50px 50px; Backgrack-Size: 50px 50px; affichage: en ligne de bloc; Largeur: 100%; hauteur: 50px;
Ou spécifiez la taille de l'arrière-plan: contenir; Soit, veuillez essayer!
2. Chargement d'image
Si vous rencontrez le problème du chargement lent de l'image, dans ce cas, le développement de téléphones mobiles utilise généralement la méthode de toile pour charger:
Pour l'API de Canvas spécifique, veuillez vous référer à: http://javascript.ruanyifeng.com/htmlapi/canvas.html
Voici un exemple de toile:
<li> <lebvas> </ canvas> </li>
JS Chargement des images et Li. Un total de 17 photos sont données!
var total = 17; var zwin = $ (fenêtre); var render = function () {var padding = 2; var winwidth = zwin.width (); var picwidth = math.floor ((winwidth-padding * 3) / 4); var tmpl = ''; pour (var i = 1; i <= totla; i ++) {var p = padding; var imgsrc = 'img /' + i + '. jpg'; if (i% 4 == 1) {p = 0; } tmpl + = '<li> <canvas id = "cvs _' + i + '"> </ canvas> </li>'; var imageoBj = new image (); ImageObj.Index = i; ImageObj.Onload = function () {var cvs = $ ('# cvs _' + this.index) [0] .getContext ('2d'); cvs.width = this.width; cvs.height = this.height; cvs.DrawImage (ceci, 0,0); } imageObj.src = imgsrc; } } rendre();3. Si le site Web mobile n'a pas besoin d'être compatible avec IE Browser, nous utilisons généralement des zeptojs . Méthode des événements tactiles intégrés zeptojs, veuillez vous référer aux événements http://zeptojs.com/#touch
J'ai jeté un coup d'œil à la nouvelle version de l'API Zeptio, qui prend déjà en charge les navigateurs IE10 ou au-dessus, et vous pouvez choisir d'utiliser des zeptojs!
4. Empêcher les pages Web de s'élargir et de rétrécir dans les téléphones mobiles . C'est le point le plus élémentaire. Ce que les développeurs de sites Web mobiles devraient savoir le plus est de configurer la fenêtre dans Meta.
Nous avons également vu la déclaration suivante sur certains sites Web mobiles:
La copie de code est la suivante:
<! Doctype html public "- // wapforum // dtd xhtml mobile 1.0 // en" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd">
La façon de définir DTD est xhtml. Si notre page utilise HTML5, vous pouvez déclarer directement <! DocType HTML> sans définir DTD.
Utilisez la fenêtre pour empêcher le zoom de la page. Définissez généralement la sélection de l'utilisateur sur 0 pour désactiver la mise à l'échelle de l'utilisateur de la vue de la page.
<meta name = "Viewport" contenu = "utilisateur-échecable = 0" />
Mais pour une meilleure compatibilité, nous utiliserons les paramètres complets de la fenêtre.
La copie de code est la suivante:
<meta name = "Viewport" Content = "width = Device-width, initial-scale = 1,0, maximum-scale = 1,0, user-échec = 0" />
Bien sûr, l'utilisateur-échelle = 0, et certaines personnes écrivent également l'utilisateur-échecable = non, qui sont OK.5. Apple-mobile-web-applicable
Apple-Mobile-Web-App-Capable est de définir si l'application Web s'exécute en mode plein écran.
grammaire:
<meta name = "Apple-Mobile-web-App-Capable Content =" YES ">
illustrer:
Si le contenu est défini sur oui, l'application Web s'exécutera en mode plein écran, sinon, ce ne sera pas le cas. La valeur par défaut du contenu est non, indiquant un affichage normal. Vous pouvez utiliser la Window.Navigator.Standalone en lecture seule pour déterminer si la page Web s'affiche en mode plein écran.
6. Détection de format
Le format-détection active ou désactive le numéro de téléphone dans la page de reconnaissance automatique.
grammaire:
<meta name = "format-détection" contenu = "téléphone = no">
illustrer:
Par défaut, l'appareil reconnaît automatiquement toute chaîne qui peut être un numéro de téléphone. Réglage du téléphone = non peut désactiver cette fonctionnalité.
7. HTML5 appelle la fonction de numérotation d'Android ou iOS
HTML5 fournit des balises qui appellent automatiquement la numérotation, il suffit d'ajouter Tel: dans le HREF de la balise A.
comme suit:
<a href = "Tél: 4008106999,1034"> 400-810-6999 Tournez-vous vers 1034 </a>
Appelez votre téléphone directement comme suit
<a href = "Tél: 15677776767"> Cliquez pour appeler le 15677776767 </a>
8. Fonction de positionnement HTML5GPS
Pour plus de détails, veuillez consulter: //www.vevb.com/post/html5_gps_getcurrentPosition
9. Lorsque vous tirez la barre de défilement de haut en bas, il est coincé ou lent
Body {-webkit-overflow-scrolling: Touch; Décrocheur de débordement: Touch;}Android3 + et iOS5 + Prise en charge CSS3 Les nouveaux attributs sont un défilement de débordement
10. La copie ou la sélection du texte est interdite
Élément {-webkit-user-select: aucun; -Moz-user-Select: Aucun; -Khtml-User-Select: Aucun; utilisateur-sélection: aucun;}Résolvez le texte de la page qui peut être sélectionné pour les appareils mobiles (selon les besoins du produit)
11. Appuyez et maintenez la page pendant longtemps et écrasez
élément {-webkit-touch-callout: aucun;}12. Shadows par défaut dans la boîte de saisie sous iPhone et iPad
Élément {-webkit-apparition: aucun; }13. Le masque gris translucide apparaît lorsqu'il touche des éléments sous iOS et Android
Élément {-webkit-tap-highlight-color: rgba (255,255,255,0)}Le réglage de la valeur alpha sur 0 peut supprimer le masque gris translucide. Remarque: La valeur de la propriété de Transparent n'est pas valide sous Android.
L'article suivant a une introduction détaillée, adresse: http://www.vevb.com/post/phone_web_ysk
14. Le traitement actif de la compatibilité est pseudo-classe: actif invalide
Méthode 1: Ajouter un ajout au corps
<Body Ontouchstart = "">
Méthode 2: JS lie les événements Touchstart ou Touchend pour documenter
<style> A {Color: # 000;} A: actif {Color: #fff;} </ style> <a herf = foo> bar </a> <script> document.addeventListener ('touchstart', function () {}, false); </cript>15. La définition de l'animation 3D permet une accélération matérielle
Élément {-webkit-transform: tradlate3d (0, 0, 0) transform: tradlate3d (0, 0, 0);}Remarque: la déformation 3D consommera plus de mémoire et de puissance
16. 1px Border of Retina Screen
Élément {largeur de bordure: mince;}17. Traitement compatible du masque Webkit
Certains téléphones bas de gamme ne prennent pas en charge le masque CSS3 et peuvent être dégradés éventuellement.
Par exemple, vous pouvez utiliser JS Jugement pour désigner différentes classes:
if ('webkitmask' dans document.DocumentElement.Style) {alert ('s support mask');} else {alert ('s non pris en charge masque');}18. Problèmes de réglage de la taille des polices lors de la rotation de l'écran
html, corps, forme, champ, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-ajustement: 100%;}19. Écran flash de transition
/ Définissez comment les éléments intégrés sont rendus dans l'espace 3D: préserver 3D / -Webkit-Transform-style: Preserve-3d; / Définir si le dos de l'élément converti est visible face à l'utilisateur: masquer / -webkit-backface-visibilité: Hidden;
20. Bogue du coin rond
Certains téléphones Android ont échoué les coins arrondis
Clip d'arrière-plan: Padding-Box;
21. Couleur d'arrière-plan de la barre supérieure
<meta name = "Apple-Mobile-Web-App-Status-Bar-Style" Content = "Black" />
illustrer:
À moins que vous n'utilisiez d'abord Apple-Mobile-Web-App-Capable pour spécifier le mode plein écran, cette balise Meta ne fonctionnera pas.
Si le contenu est défini par défaut, la barre d'état sera affichée normalement. S'il est réglé sur vide, la barre d'état aura un fond noir. Si elle est définie sur vide-translucentes, la barre d'état apparaît translucide noir. S'il est défini sur défaut ou vide, la page s'affiche sous la barre d'état, c'est-à-dire que la barre d'état occupe la partie supérieure et la page occupe la partie inférieure. Les deux ne sont pas bloqués par l'autre partie ou sont bloqués. Si elle est définie sur vide-translucentes, la page remplit l'écran, où le haut de la page est couvert par la barre d'état (il couvre la hauteur de la page de 20px, tandis que l'écran de rétine pour iPhone4 et iTouch4 est 40px). La valeur par défaut est par défaut.
22. Configurer le cache
<meta http-equiv = "cache-control" content = "no-cache" />
Les pages mobiles sont généralement mises en cache après la première charge, et chaque actualisation utilise le cache au lieu de remettre la demande au serveur. Si vous ne souhaitez pas utiliser de cache, vous pouvez définir sans cache.
23. Icônes de bureau
<link rel = "Apple-Touch-icon" href = "touch-icon-iphone.png" /> <lin /> <link rel = "Apple-Touch-icon" tailles = "152x152" href = "touch-icon-ipad-retina.png" />
Définissez différentes icônes de bureau pour différents appareils sous iOS. Si ce n'est pas défini, utilisez la capture d'écran actuelle comme icône.
La méthode d'écriture ci-dessus peut être considérée comme un brillant par défaut. La méthode de réglage suivante peut supprimer l'effet brillant et restaurer l'effet du dessin de conception!
<link rel = "Apple-Touch-Icon-pré-composé" href = "Touch-icon-iphone.png" />
La taille de l'image peut être définie sur 5757 (PX) ou la rétine peut être définie sur 114114 (PX), et la taille de l'iPad est de 72 * 72 (PX)
24. Démarrer l'écran
<link rel = "Apple-Touch-startup-iMage" href = "start.png" />
L'image affichée lorsque la page est démarrée pour se charger sous iOS est d'éviter l'écran blanc lors du chargement.
Différentes tailles peuvent être spécifiées via la matrice:
<! - iPhone -> <link href = "Apple-Touch-startup-iMage-320x460.png" media = "(Device-width: 320px)" rel = "Apple-toouch-startup-iMage" /> <! - iPhone Retina -> <link href = "Apple-Touch-startup-iMage-640x920.png (-Webkit-Device-Pixel-Ratio: 2) "rel =" Apple-Touch-Startup-Image "/> <! - iPhone 5 -> <link rel =" Apple-Touch-Startup-Image "Media =" (Device-Width: 320px) et (Device-Height: 568px) et (-WebKit-Device-Pixel-Ratio: 2) " href = "Apple-touch-startup-image-640x1096.png"> <! - iPad Portrait -> <link href = "Apple-touch-startup-iMage-768x1004.png" Media = "(Device-Width: 768PX) et (orientation: Portrait)" Rel = "Apple-startup-image" href = "Apple-Touch-Startup-Image-748x1024.png" Media = "(Disposip-width: 768px) et (orientation: paysage)" rel = "Apple-touch-startup-iMage" /> <! - iPad Retina Portrait -> <link href = "Apple-Touch-startup-iMage-1536x2008.png" media = "(Dispositive-width: Image-1536x2008.png" Media = "(Disposip-width: Image-1536x2008.png" Media = ". 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><!-- iPad Retina landscape --><link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-Webkit-Device-Pixel-Ratio: 2) "rel =" Apple-Touch-Startup-Image "/>
25. Browser privé et autre méta
Les attributs suivants n'ont pas été appliqués dans le projet, vous pouvez écrire une démo pour tester ce qui suit!
QQ Browser Private
Mode plein écran
<meta name = "x5-fullscreen" content = "true">
Écran vertical forcé
<méta name = "x5-orientation" contenu = "portrait">
Écran horizontal forcé
<méta name = "x5-orientation" contenu = "paysage">
Mode d'application
<meta name = "x5-page-mode" contenu = "app">
UC Browser Private
Mode plein écran
<meta name = "Full-Screen" Content = "Oui">
Écran vertical forcé
<meta name = "orientation de l'écran" contenu = "portrait">
Écran horizontal forcé
<meta name = "orientation de l'écran" contenu = "paysage">
Mode d'application
<meta name = "Browsermode" contenu = "application">
autre
Optimisé pour les appareils portables, principalement pour certains anciens navigateurs qui ne reconnaissent pas les fenêtres, comme BlackBerry
<meta name = "Handhedfriendly contenu =" true ">
Old Browser de Microsoft
<meta name = "mobileOptimized" content = "320">
Cliquez sur Windows Phone sans faits saillants
<meta name = "msapplication-tap-highlight" contenu = "no">
26. Le Keyup, Keydown et la prise en charge de Keypress dans iOS n'est pas très bon
Le problème est le suivant: lorsque vous utilisez la recherche d'entrée pour la recherche floue, entrez des mots clés dans le clavier et interrogez via l'arrière-plan AJAX, puis renvoyez les données, puis marquez les mots clés pour les données renvoyées en rouge. Il est normal d'utiliser les entrées pour surveiller les événements de Keyboard Keyup dans les navigateurs mobiles Android, mais il devient rouge très lentement dans les navigateurs mobiles iOS. Après entrée à l'aide de la méthode d'entrée, l'événement de Keyup ne correspond pas immédiatement. Il ne peut être correspondant qu'après la suppression!
Solution:
Vous pouvez utiliser l'événement OnInput de HTML5 pour remplacer le Keyup
<input type = "text" id = "testinput"> <script type = "text / javascript"> document.getElementById ('testinput'). addEventListener ('input', function (e) {var value = e.target.value;}); </ script>Ensuite, vous obtiendrez un effet de type Keyup!
27. Le problème de définition de la saisie du site Web H5 sur type = numéro
La définition du type d'entrée de la page Web H5 sur le numéro entraîne généralement trois problèmes. Un problème est que l'attribut MaxLength n'est pas facile à utiliser. L'autre est que lorsque le formulaire est soumis, il est arrondi par défaut. Troisièmement, certains téléphones Android ont des problèmes de style.
Une fois le problème résolu, j'utilise actuellement JS. comme suit
<input type = "Number" onInput = "checkTextLength (this, 10)"> function checkTextLength (obj, longueur) {if (obj.value.length> longueur) {obj.value = obj.value.substr (0, longueur); }}La question 2 est due au fait que la soumission de formulaire par défaut est la vérification du formulaire, la valeur par défaut de l'étape est 1 et l'attribut étape doit être défini. Si 2 décimales sont conservées, la méthode d'écriture est la suivante:
<entrée type = "nombre" Step = "0,01" />
En ce qui concerne l'étape, je vais donner une brève introduction ici. Dans le type d'entrée = numéro, une flèche de haut en bas sera généralement générée automatiquement. Cliquez sur la flèche up ajoutera une étape par défaut. Cliquez sur la flèche vers le bas réduira une étape par défaut. L'étape par défaut du nombre est 1. C'est-à-dire, étape = 0,01, vous pouvez autoriser l'entrée de 2 décimales et cliquer sur les flèches haut et bas pour augmenter 0,01 et diminuer respectivement 0,01.
Si les étapes et les min sont utilisés ensemble, la valeur doit être entre min et max.
Voir l'exemple suivant:
<input type = "nombre" Step = "3.1" min = "1" />
Quels nombres peuvent être entrés dans la zone d'entrée?
Premièrement, si la valeur minimale est 1, vous pouvez entrer 1,0, le second est d'entrer (1 + 3.1), c'est-à-dire 4.1, et ainsi de suite, chaque clic sur la flèche haut et bas augmentera ou diminuera de 3,1, et les autres nombres seront invalides. Ceci est la brève introduction à Step.
Question 3: Supprimez le style d'entrée par défaut
Input [Type = Number] {-Moz-Appearance: TextField;} Input [Type = Number] :: - Webkit-inner-Spin-Button, Input [Type = Number] :: - WebKit-outer-Spin-Button {-Webkit-Apparement: Aucun; marge: 0;}28. Le style de bouton d'entrée de réglage iOS sera écrasé par le style par défaut
La solution est la suivante:
entrée, textarea {border: 0; -Webkit-apparence: aucun; }Définissez le style par défaut sur None
29. Entrée de lettre de clavier iOS, capitalisation de lettre initiale par défaut
Solution: définissez les propriétés suivantes
<input type = "text" autocapitalize = "off" />
30. Sélectionnez déroulement Sélectionner l'alignement Right Right
Les paramètres sont les suivants:
Sélectionnez l'option {Direction: RTL;}3.
Il peut être défini comme suit:
-Webkit-transform: rotation (-4deg) skew (10deg) tradlatez (0); Transform: Rotate (-4deg) skew (10deg) tradlatez (0); Aperçu: 1px solide RGBA (255 255,255,0)
32. Cliquez sur mobile 300 ms délai
300 ms est toujours acceptable, mais nous devons résoudre le problème causé par 300 ms. 300 ms font que l'expérience utilisateur n'est pas très bonne. Pour résoudre ce problème, nous utilisons généralement des événements TAP pour remplacer les événements de clic du côté mobile.
Deux JS sont recommandés, l'un est FastClick et l'autre est Tap.js
Pour un délai de 300 ms, veuillez consulter: http://thx.github.io/mobile/300ms-click-delay/
33. Problème de pénétration des points de terminaison mobile
Les exemples sont les suivants:
<div id = "haorooms"> Test d'événement de NOD </div> <a href = "www.vevb.com"> www.vevb.com </a>
La div est le masque de positionnement absolu et l'index z est supérieur à a. La balise A est un lien dans la page, nous lions l'événement TAP à la div:
$ ('# harooms'). on ('tap', function () {$ ('# harooms'). hide ();});Lorsque nous cliquons sur le calque de masque, le div disparaît normalement, mais lorsque nous cliquons sur le calque de masque sur la balise A, nous constatons que le lien A est déclenché, qui est appelé un événement point-ponctuel.
raison:
Touchstart précède Touchennd précédent le clic. C'est-à-dire que le déclenchement de clic est retardé, et cette fois est d'environ 300 ms. C'est-à-dire que le masque est caché après les déclencheurs de notre robinet. À l'heure actuelle, le clic n'a pas été déclenché. Après 300 ms, notre clic se déclenche vers le lien ci-dessous car le masque est caché.
résoudre:
(1) Essayez d'utiliser l'événement tactile pour remplacer l'événement de clic. Par exemple, utilisez l'événement Touchend (recommandé).
(2) Utilisez FastClick, https://github.com/ftlabs/fastclick
(3) Utilisez EmptiserDefault pour bloquer le clic d'une balise
(4) retarder un certain temps (300 ms +) pour gérer les événements (non recommandés)
(5) Ce qui précède peut généralement être résolu, mais si cela ne fonctionne vraiment pas, il sera remplacé par un incident de clic.
Ce qui suit est l'événement Touchend, comme suit:
$ ("# harooms"). sur ("Touchend", fonction (événement) {event.preventDefault ();});34. Éliminez le numéro de fourche dans IE10
Entrée: -ms-Clear {affichage: aucun;}35. Concernant l'optimisation des polices sur iOS et OS X (il y aura des polices de police incohérentes sur les écrans horizontaux et verticaux, etc.)
La taille de la police sera réinitialisée lorsque le navigateur iOS est aménagé. La définition de la taille de la taille du texte sur Nul peut résoudre le problème sur iOS, mais la fonction de mise à l'échelle des polices de Safari sur la version de bureau ne sera pas valide, la meilleure solution consiste donc à transformer le texte de la taille du texte à 100%.
-webkit-text-size-ajustement: 100%; - ms-text-size-ajustement: 100%; text-size-ajustement: 100%;
36. À propos du système iOS, lors de la saisie de l'anglais avec une méthode d'entrée chinoise, un sixième espace peut apparaître entre les lettres.
Peut être supprimé par régulier
this.value = this.value.replace (// u2006 / g, '');
37. Problème de défaillance de la mise en place de la mise en scène audio mobile HTML5
Ce n'est pas un bug. Étant donné que la lecture automatique de l'audio ou de la vidéo dans les pages Web causera des problèmes ou une consommation de trafic inutile aux utilisateurs, les systèmes Apple et Android interdisent généralement la lecture automatique et la lecture déclenchée à l'aide de JS. Il doit être déclenché par l'utilisateur avant de pouvoir être lu.
Solution: Appuyez d'abord sur l'utilisateur Touchstart, Trigger Playback et Pause (l'audio commence à se charger, puis utilisez JS pour le faire fonctionner).
Code de solution:
document.addeventListener ('TouchStart', function () {document.getElementsByTagName ('Audio') [0] .Play (); document.getElementsByTagName ('Audio') [0] .pause ();});38. Le problème de l'espace réservé n'est pas pris en charge à la date d'entrée mobile HTML5
Je ne pense pas qu'il y ait une bonne solution à cela, utilisez la méthode suivante
La copie de code est la suivante:
<entrée placeholder = "date" type = "text" onfocus = "(this.type = 'date')" id = "date">
Certains navigateurs peuvent avoir besoin de cliquer deux fois!39. Certains modèles ont une entrée avec la recherche de type, et leur propre méthode de modification de style de bouton Close est fournie.
Certains modèles de contrôles d'entrée de recherche seront livrés avec un bouton de fermeture (un pseudo-élément), et généralement pour être compatible avec tous les navigateurs, nous en implémenterons un par nous-mêmes. À l'heure actuelle, la méthode pour supprimer le bouton de fermeture native est
#Search :: - Webkit-Search-Cancel-Button {affichage: aucun; }Si vous souhaitez utiliser le bouton Close natif et que vous souhaitez qu'il soit conforme au style de conception, vous pouvez modifier le style de ce pseudo-élément.
40. Encouragez l'option pour se développer
Méthode Zepto:
$ (sltelement) .trrgger ("Mousedown");Méthode JS native:
Fonction ShowDropdown (sltelement) {Var Event; événement = document.CreateEvent («MouseEvents»); event.initmouseevent («Mousedown», vrai, vrai, fenêtre); Sltelement.DispatchEvent (événement);};