Français
Français
Pour les utilisateurs d'appareils mobiles, le mode de fonctionnement le plus courant est les habitudes d'utilisation des mains gauche et droite. Les utilisateurs gauchers mettent souvent l'appareil dans leur main gauche et utilisent la main droite pour fonctionner; Les utilisateurs droitiers sont habitués à maintenir l'appareil dans leur main droite et à utiliser la main gauche pour fonctionner. Cela signifie que lorsque différents utilisateurs parcourent la page Web, la façon dont l'appareil maintient l'appareil affectera directement leur expérience utilisateur. Si la direction d'affichage de l'image ne se conforme pas aux habitudes de fonctionnement de l'utilisateur, elle peut provoquer des inconvénients ou même une inconfort.
Nous pouvons implémenter la fonction de retourner automatiquement les images à travers les étapes suivantes:
Déterminez la direction de l'appareil de l'utilisateur: vous pouvez déterminer l'angle de rotation de l'appareil via la fenêtre du navigateur .
Ajustez l'image en fonction de la direction: ajustez automatiquement la direction d'affichage de l'image en fonction des informations de direction de l'appareil. Nous pouvons utiliser l'attribut Transform de CSS pour réaliser cette fonction, garantissant que l'image est toujours affichée de la manière la plus confortable pour l'utilisateur.
Remplacement des ressources d'image: si l'image doit être inversée, elle peut être traitée via PHP côté serveur, générer l'image inversée et la renvoyer à l'utilisateur. Afin d'améliorer l'expérience utilisateur et d'éviter la régénération d'images inversées à chaque fois, la mise en cache d'image peut être effectuée en PHP.
Voici un exemple de code PHP simple qui montre comment gérer dynamiquement le retournement de l'image à travers PHP.
<?php
// PrésentéGDBibliothèque，s'assurerPHPL'environnement prend en charge le traitement d'image
if (!extension_loaded('gd')) {
die('GD extension is not installed');
}
// Lire l'image originale
$imagePath = 'path_to_image.jpg'; // Remplacer par le chemin réel de l'image
$image = imagecreatefromjpeg($imagePath);
// Déterminez si l'image se charge avec succès
if (!$image) {
die('Unable to load image');
}
// Effectuer un traitement de flip d'image
// Photos inversées à utiliserimagerotate()fonction，L'angle est180Degré
$flippedImage = imagerotate($image, 180, 0);
// Sortir des images au navigateur
header('Content-Type: image/jpeg');
imagejpeg($flippedImage);
// Mémoire libre
imagedestroy($image);
imagedestroy($flippedImage);
?>
Dans le code ci-dessus, une image est d'abord chargée, puis une rotation à 180 degrés est utilisée pour simuler l'effet de retournement de l'image. Enfin, l'image est sortie directement vers le navigateur.
Afin de mieux s'adapter à différents appareils, nous pouvons également utiliser JavaScript pour détecter l'orientation de l'appareil et ajuster dynamiquement l'affichage de l'image. Voici un simple exemple de code frontal:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple d'image intimidé automatiquement</title>
<style>
.flipped-image {
transform: rotate(0deg); /* 默认角Degré */
transition: transform 0.3s ease;
}
</style>
</head>
<body>
<img id="userImage" src="path_to_image.jpg" class="flipped-image" alt="Retourner l'image">
<script>
// Modification de la direction de l'appareil de surveillance
window.addEventListener("deviceorientation", function(event) {
const image = document.getElementById('userImage');
// 判断设备的旋转角Degré
const rotation = event.gamma; // 取设备旋转角Degré（GénéralementXaxe）
if (rotation < -45) {
image.style.transform = "rotate(180deg)"; // Images inversées
} else {
image.style.transform = "rotate(0deg)"; // Affichage normal
}
});
</script>
</body>
</html>
Dans cet exemple, nous écoutons l'angle de rotation de l'appareil via l'événement de l'orientation device . Lorsque l'angle d'inclinaison de l'appareil dépasse un certain seuil, l'image se retourne automatiquement, s'adaptant aux habitudes d'utilisation des utilisateurs gauchers ou droitiers.
Dans certains cas, nous devrons peut-être afficher différentes ressources, telles que différentes images ou différents contenus, en fonction de l'appareil de l'utilisateur. En PHP, vous pouvez utiliser la fonction en-tête () pour implémenter la redirection des URL. Si l'URL de la ressource d'image est impliquée, vous pouvez le gérer comme ceci:
