suchen
HeimWeb-FrontendH5-TutorialNeue HTML5-Funktionen für die API für mobile Geräte

Um mobile Geräte besser bedienen zu können, hat HTML5 eine Reihe von APIs für mobile Geräte eingeführt.

1. Geolocation-API

GeolocationSchnittstelle wird verwendet, um den geografischen Standort des Benutzers zu ermitteln. Die verwendete Methode basiert auf GPS oder anderen Mechanismen (wie IP-Adresse, WLAN-Hotspot usw.).

Mit der folgenden Methode kann überprüft werden, ob der Browser diese Schnittstelle unterstützt.

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

1.1 getCurrentPosition-Methode

getCurrentPosition-Methode wird verwendet, um den geografischen Standort des Benutzers zu ermitteln. Für die Verwendung ist die Autorisierung des Benutzers erforderlich. Der Browser öffnet ein Dialogfeld, in dem er gefragt wird, ob er der aktuellen Seite erlauben möchte, seinen geografischen Standort abzurufen. Die Rückruffunktion muss in zwei Situationen in Betracht gezogen werden: Zum einen soll die Autorisierung erteilt werden, zum anderen soll die Autorisierung verweigert werden. Wenn der Benutzer die Autorisierung verweigert, wird ein Fehler ausgegeben.

navigator.geolocation.getCurrentPosition(geoSuccess, geoError);

Der obige Code gibt zwei Rückruffunktionen an, die den aktuellen Adressort verarbeiten.

(1) Der Autorisierung zustimmen

Wenn der Benutzer der Autorisierung zustimmt, wird geoSuccess aufgerufen.

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);    //每秒的速度(单位:米)}

Der Parameter von geoSuccess ist ein EreignisObjekt. event.coords Attribut zeigt auf ein Objekt, einschließlich der Standortinformationen des Benutzers, hauptsächlich die folgenden Werte:

  • coords.latitude: Breitengrad

  • coords.longitude: Längengrad

  • coords.accuracy: Genauigkeit

  • coords.altitude: Höhe

  • coords.altitudeAccuracy: Höhengenauigkeit in Metern

  • coords.heading: Richtung in 360 Grad

  • coords.speed: Geschwindigkeit pro Sekunde (Einheit: Meter)

(2) Autorisierung verweigert

Wenn der Benutzer die Autorisierung verweigert, wird geoError aufgerufen.

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

Der Parameter von geoError ist ebenfalls ein Ereignisobjekt. Das Attribut event.code stellt den Fehlertyp dar und hat vier Werte:

  • 0: Unbekannter Fehler, der Browser fragt nicht nach der Fehlerursache, äquivalent zur Konstanteevent.UNKNOWN_ERROR .

  • 1: Der Benutzer verweigert die Autorisierung, gleichbedeutend mit dem ständigen Ereignis.PERMISSION_DENIED

  • 2: Es wird kein Standort ermittelt, weder GPS noch andere Positionierungsmechanismen kann nicht gefunden werden, entspricht der Konstante event.POSITION_UNAVAILABLE.

  • 3: Timeout, GPS gibt das Ergebnis nicht innerhalb der angegebenen Zeit zurück, äquivalent zum konstanten Ereignis.TIMEOUT.

event.message ist die Fehlermeldung.

(3) Positionierungsverhalten festlegen

Die Methode getCurrentPosition kann auch ein Objekt als dritten Parameter akzeptieren, um das Positionierungsverhalten festzulegen.

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

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

Dieses Parameterobjekt hat drei Mitglieder:

  • enableHighAccuracy: Wenn es auf „true“ gesetzt ist, muss der Client genauere Standortinformationen bereitstellen, was dazu führt genauere Standortinformationen. Lange Positionierungszeit und höherer Stromverbrauch, die Standardeinstellung ist falsch.

  • Timeout: Die maximale Anzahl an Millisekunden, die auf die Antwort des Clients gewartet werden soll. Der Standardwert ist Unendlich.

  • maxinumAge: Die maximale Anzahl an Millisekunden, die ein Client zum Zwischenspeichern von Daten verwenden kann. Bei der Einstellung 0 liest der Client den Cache nicht; bei der Einstellung unendlich liest der Client nur den Cache.

1.2 watchPosition-Methode und clearWatch-Methode

Mit der watchPosition-Methode können kontinuierliche Änderungen der Position des Benutzers überwacht werden. Die Verwendungsmethode ist dieselbe wie die getCurrentPosition-Methode.

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

Die Rückruffunktion wird aufgerufen, sobald sich der Standort des Benutzers ändert.

Wenn Sie die Überwachung abbrechen möchten, verwenden Sie die Methode „clearWatch“.

navigator.geolocation.clearWatch(watchID);

2. Vibrations-API

Die Vibrationsschnittstelle wird verwendet, um Befehle im Browser auszugeben, um das Gerät zum Vibrieren zu bringen. Da dieser Vorgang viel Strom verbraucht, ist es am besten, ihn abzubrechen, wenn der Akku fast leer ist.

Verwenden Sie den folgenden Code, um zu überprüfen, ob die Schnittstelle verfügbar ist. Derzeit wird es nur von den neuesten Versionen von Chrome und Firefox für die Android-Plattform unterstützt.


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

Die Vibrationsmethode kann das Gerät zum Vibrieren bringen und ihr Parameter ist die Anzahl der Millisekunden, die die Vibration dauert.

navigator.vibrate(1000);

Der obige Code bewirkt, dass das Gerät 1 Sekunde lang vibriert. Die

vibrate-Methode kann auch ein Array als Parameter akzeptieren, der den Vibrationsmodus darstellt. Die Array-Mitglieder an geraden Positionen stellen die Anzahl der zu vibrierenden Millisekunden dar, und die Array-Mitglieder an ungeraden Positionen stellen die Anzahl der zu wartenden Millisekunden dar.

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

Der obige Code gibt an, dass das Gerät 500 Millisekunden lang vibriert, dann 300 Millisekunden wartet und dann 500 Millisekunden lang vibriert.

Vibrieren ist ein nicht blockierender Vorgang, das heißt, während das Telefon vibriert, läuft der JavaScript-Code weiter nach unten. Um das Vibrieren zu stoppen, übergeben Sie einfach 0 Millisekunden an die Vibrationsmethode.

navigator.vibrate(0);

3、亮度调节

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

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

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

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

Das obige ist der detaillierte Inhalt vonNeue HTML5-Funktionen für die API für mobile Geräte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
H5: Erkundung der neuesten Version von HTMLH5: Erkundung der neuesten Version von HTMLMay 03, 2025 am 12:14 AM

Html5isamajorrevisionOfthehtmlStandardThatrevolutionizeswebdevelopmentByIntroducingNewsemanticelements und Kapabilität) iTenHancesCodereadability undseowithelemente -artig, und 2) html5 -zeitricher, interaktive Experien

Jenseits der Grundlagen: Fortgeschrittene Techniken im H5 -CodeJenseits der Grundlagen: Fortgeschrittene Techniken im H5 -CodeMay 02, 2025 am 12:03 AM

Erweiterte Tipps für H5 umfassen: 1. Verwenden Sie komplexe Grafiken zum Zeichnen, 2. Verwenden Sie Webworker, um die Leistung zu verbessern. Diese Tipps helfen Entwicklern dabei, dynamischere, interaktivere und effizientere Webanwendungen zu erstellen.

H5: Die Zukunft von Webinhalten und DesignH5: Die Zukunft von Webinhalten und DesignMay 01, 2025 am 12:12 AM

H5 (HTML5) verbessert Webinhalte und Design durch neue Elemente und APIs. 1) H5 verbessert das semantische Tagging und die Multimedia -Unterstützung. 2) Es führt Leinwand und SVG ein und bereichert das Webdesign. 3) H5 arbeitet durch Erweiterung der HTML -Funktionalität durch neue Tags und APIs. 4) Die grundlegende Nutzung beinhaltet das Erstellen von Grafiken, und die erweiterte Nutzung umfasst Webstorageapi. 5) Entwickler müssen auf die Browserkompatibilität und die Leistungsoptimierung achten.

H5: Neue Funktionen und Funktionen für die WebentwicklungH5: Neue Funktionen und Funktionen für die WebentwicklungApr 29, 2025 am 12:07 AM

H5 bringt eine Reihe neuer Funktionen und Fähigkeiten mit sich und verbessert die Interaktivität und Entwicklungseffizienz von Webseiten erheblich. 1. Semantische Tags wie Verbesserung der SEO. 2. Multimedia Support vereinfacht Audio- und Video -Wiedergabe durch und Tags. 3. Canvas Drawing bietet dynamische Grafikzeichnungswerkzeuge. 4. Lokaler Speicher vereinfacht die Datenspeicherung durch LocalStorage und SessionStorage. 5. Die Geolocation-API erleichtert die Entwicklung standortbasierter Dienste.

H5: Schlüsselverbesserungen bei HTML5H5: Schlüsselverbesserungen bei HTML5Apr 28, 2025 am 12:26 AM

HTML5 bringt fünf wichtige Verbesserungen mit sich: 1. Semantische Tags verbessern die Code -Klarheit und SEO -Effekte; 2. Multimedia Support vereinfacht Video- und Audio -Einbettung; 3. Form -Verbesserung vereinfacht die Überprüfung; 4. Offline und lokaler Speicher verbessert die Benutzererfahrung. 5. Leinwand- und Grafikfunktionen verbessern die Visualisierung von Webseiten.

HTML5: Der Standard und seine Auswirkungen auf die WebentwicklungHTML5: Der Standard und seine Auswirkungen auf die WebentwicklungApr 27, 2025 am 12:12 AM

Die Kernmerkmale von HTML5 sind semantische Tags, Multimedia -Support, Offline -Speicher und lokaler Speicher sowie Form. 1. Semantische Tags wie usw., um die Code -Lesbarkeit und SEO -Effekt zu verbessern. 2. Vereinfachen Sie die Multimedia -Einbettung mit Etiketten. 3. Offline-Speicher und lokaler Speicher wie ApplicationCache und LocalStorage unterstützen den netzwerkfreien Betrieb und die Datenspeicherung. 4. Formularverbesserung führt neue Eingangstypen und Überprüfungseigenschaften ein, um die Verarbeitung und Überprüfung zu vereinfachen.

Beispiele für H5 -Code: Praktische Anwendungen und TutorialsBeispiele für H5 -Code: Praktische Anwendungen und TutorialsApr 25, 2025 am 12:10 AM

H5 bietet eine Vielzahl neuer Funktionen und Funktionen und verbessert die Fähigkeiten der Front-End-Entwicklung erheblich. 1. Multimedia-Unterstützung: Einbetten von Medien und Elementen, keine Plug-Ins sind erforderlich. 2. Leinwand: Verwenden Sie Elemente, um 2D -Grafiken und -Animationen dynamisch zu rendern. 3. Lokaler Speicher: Implementieren Sie die persistente Datenspeicherung über LocalStorage und SessionStorage, um die Benutzererfahrung zu verbessern.

Die Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeDie Verbindung zwischen H5 und HTML5: Ähnlichkeiten und UnterschiedeApr 24, 2025 am 12:01 AM

H5 und HTML5 sind verschiedene Konzepte: HTML5 ist eine Version von HTML, die neue Elemente und APIs enthält. H5 ist ein Rahmen für mobile Anwendungsentwicklungen, die auf HTML5 basieren. HTML5 pariert und rendert Code über den Browser, während H5 -Anwendungen Container ausführen und über JavaScript mit nativem Code interagieren müssen.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

MantisBT

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor