Maison  >  Article  >  interface Web  >  Comment puis-je détecter si un navigateur est utilisé sur un appareil portable ?

Comment puis-je détecter si un navigateur est utilisé sur un appareil portable ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-03 17:32:02252parcourir

How Can I Detect If a Browser is Being Used on a Handheld Device?

Détermination de l'utilisation du navigateur d'un appareil portable

Pour détecter si un navigateur sur un appareil portable (téléphone/tablette iOS/Android) est utilisé, considérez les techniques suivantes :

Méthode 1 : Utilisation de la requête multimédia portable

La requête multimédia portable est une approche populaire pour identifier les appareils portables. Cependant, comme vous l’avez mentionné, cela peut ne pas fonctionner comme prévu dans tous les cas. En effet, certains smartphones modernes peuvent ne pas être considérés comme des appareils « portables » par cette requête multimédia.

Pour utiliser la requête multimédia portable, vous pouvez essayer le code CSS suivant :

width: 600px;
@media handheld { width: 300px; }

Méthode 2 : Utilisation de la requête multimédia sur la largeur de l'appareil

Une approche alternative consiste à utiliser la requête multimédia sur la largeur de l'appareil. Cette requête cible les appareils en fonction de leur largeur d'écran maximale. Par exemple, pour cibler des appareils avec une largeur d'écran maximale de 480 px (courante sur les smartphones et les tablettes), vous pouvez utiliser le code suivant :

@media only screen and (max-device-width: 480px) {

Méthode 3 : Détection de l'entrée du pointeur

Les appareils dotés d'écrans tactiles (tels que les smartphones et les tablettes) utilisent généralement une entrée de pointeur « aucune » ou « grossière », tandis que les navigateurs Web traditionnels utilisant une souris ou un trackpad enregistrent une entrée de pointeur « fine ». Vous pouvez exploiter cette différence pour détecter les appareils portables :

@media (pointer:none), (pointer:coarse) {

En incorporant ces requêtes multimédias dans votre code, vous pouvez ajuster dynamiquement les styles de vos éléments selon que l'utilisateur accède ou non à votre site Web à partir d'un appareil portable. ou un navigateur Web conventionnel.

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