recherche
Maisoninterface WebTutoriel H5API pour appareils mobiles : nouvelles fonctionnalités HTML5

Afin de mieux servir les appareils mobiles, HTML5 a lancé une série d'API pour les appareils mobiles.

1. API de géolocalisation

GéolocalisationInterface est utilisée pour obtenir la localisation géographique de l'utilisateur. La méthode qu'il utilise est basée sur le GPS ou d'autres mécanismes (tels que l'adresse IP, le hotspot WIFI, etc.).

La méthode suivante permet de vérifier si le navigateur prend en charge cette interface.

if (navigator.geolocation) {    // 支持} else {    //不支持}

1.1 méthode getCurrentPosition

la méthode getCurrentPosition est utilisée pour obtenir la localisation géographique de l'utilisateur. Son utilisation nécessite l'autorisation de l'utilisateur. Le navigateur affichera une boîte de dialogue demandant à l'utilisateur s'il autorise la page actuelle à obtenir sa localisation géographique. La fonction de rappel doit être considérée dans deux situations : l'une consiste à accorder une autorisation et l'autre à refuser l'autorisation. Une erreur sera générée si l'utilisateur refuse l'autorisation.

navigator.geolocation.getCurrentPosition(geoSuccess, geoError);

Le code ci-dessus spécifie deux fonctions de rappel qui gèrent l'emplacement de l'adresse actuelle.

(1) Accepter d'autoriser

Si l'utilisateur accepte d'autoriser, geoSuccess sera appelé.

function geoSuccess(event) {    var coords = event.coords;
    console.log('latitude: ' + coords.latitude);    //纬度
    console.log('longitude: ' + coords.longitude);    //经度
    console.log('accuracy: ' + coords.accuracy);    //精度
    console.log('altitude: ' + coords.altitude);    //海拔
    console.log('altitudeAccuracy: ' + coords.altitudeAccuracy); //海拔精度(单位:米)
    console.log('heading: ' + coords.heading);    //以360度表示的方向
    console.log('speed: ' + coords.speed);    //每秒的速度(单位:米)}

Le paramètre de geoSuccess est un événementobjet. event.coords attribut pointe vers un objet, y compris les informations de localisation de l'utilisateur, principalement les valeurs suivantes :

  • coords.latitude : latitude

  • coords.longitude : Longitude

  • coords.accuracy : Précision

  • coords.altitude : Altitude

  • coords.altitudeAccuracy : Précision de l'altitude en mètres

  • coords.heading : Direction à 360 degrés

  • coords.speed : Vitesse par seconde (unité : mètres)

(2) Autorisation refusée

Si l'utilisateur refuse l'autorisation, geoError sera appelé.

function geoError(event) {
    console.log('Error code ' + event.code + '. ' + event.message);
}

Le paramètre de geoError est également un objet événement. L'attribut event.code représente le type d'erreur et a quatre valeurs :

  • 0 : Erreur inconnue, le navigateur ne demande pas la cause de l'erreur, équivalente à la constanteévénement.UNKNOWN_ERROR .

  • 1 : L'utilisateur refuse l'autorisation, équivalent à l'événement constant.PERMISSION_DENIED

  • 2 : Aucune localisation n'est obtenue, GPS ou autres mécanismes de positionnement Impossible de localiser, équivalent à l'événement constant.POSITION_UNAVAILABLE.

  • 3 : Timeout, le GPS ne renvoie pas le résultat dans le délai spécifié, équivalent à l'événement constant.TIMEOUT.

event.message est le message d'erreur.

(3) Définir le comportement de positionnement

La méthode getCurrentPosition peut également accepter un objet comme troisième paramètre pour définir le comportement de positionnement.

var option = {
    enableHighAccuracy: true,
    timeout: Infinity,
    maximumAge: 0};

navigator.geolocation.getCurrentPosition(geoSuccess, geoError, option);

Cet objet paramètre comporte trois membres :

  • enableHighAccuracy : s'il est défini sur true, le client doit fournir des informations de localisation plus précises, ce qui entraînera Informations de localisation plus précises. Temps de positionnement long et consommation d'énergie plus élevée, le paramètre par défaut est faux.

  • timeout : Le nombre maximum de millisecondes à attendre avant que le client réponde. La valeur par défaut est Infinity.

  • maxinumAge : le nombre maximum de millisecondes qu'un client peut utiliser pour mettre en cache les données. S'il est défini sur 0, le client ne lit pas le cache ; s'il est défini sur l'infini, le client lit uniquement le cache.

1.2 Méthode watchPosition et méthode clearWatch

La méthode watchPosition peut être utilisée pour surveiller les changements continus dans la position de l'utilisateur. La méthode d'utilisation est la même que la méthode getCurrentPosition.

var watchID = navigator.geolocation.watchPosition(geoSuccess, geoError);

La fonction de rappel est appelée une fois que l'emplacement de l'utilisateur change.

Si vous souhaitez annuler la surveillance, utilisez la méthode clearWatch.

navigator.geolocation.clearWatch(watchID);

2. API Vibration

L'interface Vibration est utilisée pour émettre des commandes dans le navigateur pour faire vibrer l'appareil. Cette opération étant très consommatrice d’énergie, il est préférable d’annuler cette opération lorsque la batterie est faible.

Utilisez le code ci-dessous pour vérifier si l'interface est disponible. Actuellement, seules les dernières versions de Chrome et Firefox pour la plateforme Android le prennent en charge.


navigator.vibrate = navigator.vibrate ||
                               navigator.webkitVibrate ||
                               navigator.mozVibrate ||
                               navigator.msVibrate;if (navigator.vibrate) {    // 支持}

La méthode de vibration peut faire vibrer l'appareil, et son paramètre est le nombre de millisecondes que dure la vibration.

navigator.vibrate(1000);

Le code ci-dessus fait vibrer l'appareil pendant 1 seconde. La méthode

vibrate peut également accepter un tableau comme paramètre, représentant le mode de vibration. Les membres du tableau en positions paires représentent le nombre de millisecondes à vibrer, et les membres du tableau en positions impaires représentent le nombre de millisecondes à attendre.

navigator.vibrate([500, 300, 500]);

Le code ci-dessus indique que l'appareil vibre pendant 500 millisecondes, puis attend 300 millisecondes, puis vibre pendant 500 millisecondes.

vibrer est une opération non bloquante, c'est-à-dire que pendant que le téléphone vibre, le code JavaScript continue de s'exécuter vers le bas. Pour arrêter de vibrer, passez simplement 0 milliseconde dans la méthode de vibration.

navigator.vibrate(0);

3、亮度调节

当移动设备的亮度传感器,感知外部亮度发生显著变化时,会触发devicelight事件。目前,只有Firefox布署了这个API。

window.addEventListener('devicelight', function(event) {
    console.log(event.value + 'lux');
})

下面代码表示,devicelight事件的回调函数,接受一个事件对象作为参数。该对象的value属性就是亮度值。

这种API的一种应用是,我们可以针对亮度的强弱来改网页背景和文字颜色。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
H5: Exploration de la dernière version de HTMLH5: Exploration de la dernière version de HTMLMay 03, 2025 am 12:14 AM

Html5isamajorrevisionofthehtmlstandardthatrevolutionizewebdevelopmenty introducingNewSemanticElelements et capabilities.1)

Au-delà des bases: techniques avancées dans le code H5Au-delà des bases: techniques avancées dans le code H5May 02, 2025 am 12:03 AM

Des conseils avancés pour H5 incluent: 1. Utilisez des graphiques complexes pour dessiner, 2. Utilisez des travailleurs Web pour améliorer les performances, 3. Améliorer l'expérience utilisateur via WebStorage, 4. Implémentation Responsive Design, 5. Utilisez WebBrTC pour obtenir une communication en temps réel, 6. Effectuer une optimisation des performances et les meilleures pratiques. Ces conseils aident les développeurs à créer des applications Web plus dynamiques, interactives et efficaces.

H5: L'avenir du contenu Web et de la conceptionH5: L'avenir du contenu Web et de la conceptionMay 01, 2025 am 12:12 AM

H5 (HTML5) améliorera le contenu Web et la conception à travers de nouveaux éléments et API. 1) H5 améliore le marquage sémantique et le support multimédia. 2) Il présente Canvas et SVG, enrichissant la conception Web. 3) H5 fonctionne en étendant la fonctionnalité HTML via de nouvelles balises et API. 4) L'utilisation de base inclut la création de graphiques à l'aide de l'informatique et une utilisation avancée implique Webstoragapi. 5) Les développeurs doivent prêter attention à la compatibilité du navigateur et à l'optimisation des performances.

H5: nouvelles fonctionnalités et capacités pour le développement WebH5: nouvelles fonctionnalités et capacités pour le développement WebApr 29, 2025 am 12:07 AM

H5 apporte un certain nombre de nouvelles fonctions et capacités, améliorant considérablement l'efficacité d'interactivité et de développement des pages Web. 1. Tags sémantiques tels que améliorer le référencement. 2. La prise en charge multimédia simplifie le pavée audio et vidéo et les balises. 3. Le dessin Canvas fournit des outils de dessin graphiques dynamiques. 4. Le stockage local simplifie le stockage des données via LocalStorage et SessionStorage. 5. L'API de géolocalisation facilite le développement de services basés sur la localisation.

H5: Améliorations clés de HTML5H5: Améliorations clés de HTML5Apr 28, 2025 am 12:26 AM

HTML5 apporte cinq améliorations clés: 1. Les balises sémantiques améliorent la clarté du code et les effets SEO; 2. Prise en charge multimédia simplifie la vidéo et la formation audio; 3. L'amélioration du formulaire simplifie la vérification; 4. Le stockage hors ligne et local améliore l'expérience utilisateur; 5. Canvas et fonctions graphiques améliorent la visualisation des pages Web.

HTML5: la norme et son impact sur le développement WebHTML5: la norme et son impact sur le développement WebApr 27, 2025 am 12:12 AM

Les caractéristiques principales de HTML5 incluent des balises sémantiques, une prise en charge multimédia, un stockage hors ligne et un stockage local et une amélioration de la forme. 1. Tags sémantiques tels que, etc. pour améliorer la lisibilité du code et l'effet SEO. 2. Simplifiez l'intégration multimédia avec des étiquettes. 3. Stockage hors ligne et stockage local tels que ApplicationCache et LocalStorage Prise en charge l'opération sans réseau et le stockage de données. 4. L'amélioration du formulaire introduit de nouveaux types d'entrée et des propriétés de vérification pour simplifier le traitement et la vérification.

Exemples de code H5: applications pratiques et tutorielsExemples de code H5: applications pratiques et tutorielsApr 25, 2025 am 12:10 AM

H5 offre une variété de nouvelles fonctionnalités et fonctions, améliorant considérablement les capacités du développement frontal. 1. Prise en charge multimédia: intégration des médias et éléments, aucun plug-ins n'est requis. 2. Canvas: utilisez des éléments pour rendre dynamiquement les graphiques et les animations 2D. 3. Stockage local: implémentez le stockage de données persistant via LocalStorage et SessionStorage pour améliorer l'expérience utilisateur.

Le lien entre H5 et HTML5: similitudes et différencesLe lien entre H5 et HTML5: similitudes et différencesApr 24, 2025 am 12:01 AM

H5 et HTML5 sont des concepts différents: HTML5 est une version de HTML, contenant de nouveaux éléments et API; H5 est un cadre de développement d'applications mobiles basé sur HTML5. HTML5 analyse et rend le code via le navigateur, tandis que les applications H5 doivent exécuter des conteneurs et interagir avec le code natif via JavaScript.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

Version crackée d'EditPlus en chinois

Version crackée d'EditPlus en chinois

Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.