interface Web
js tutoriel
Développement de terminaux mobiles pour gérer les écrans horizontaux et verticaux des appareils mobiles
Développement de terminaux mobiles pour gérer les écrans horizontaux et verticaux des appareils mobiles
Cet article présente principalement les bases du développement Web mobile - traitant des écrans horizontaux et verticaux des appareils mobiles. L'attribut window.orientation et l'événement onorientationchange ainsi que la méthode de requête multimédia sont deux solutions qui doivent être notées lors du processus. processus de développement. Amis dans le besoin Vous pouvez vous référer à ce qui suit
Afin de faire face à la fragmentation des écrans des appareils mobiles, lorsque nous développons des applications Web mobiles, l'une des meilleures pratiques est d'adopter une mise en page fluide pour garantir que l'espace limité de l'écran soit utilisé au maximum. En raison de la directionnalité de l'écran, une fois que l'utilisateur a changé la direction de l'écran, certains problèmes de conception ou de mise en œuvre deviendront apparents - nous devrons au moins nous occuper de l'adaptation de la largeur de l'élément d'affichage actuel (bien sûr, nous pouvons il faut faire plus que cela). Plusieurs fois, nous devons concevoir des modes d'affichage d'application correspondants pour différentes orientations d'écran. À l'heure actuelle, il est extrêmement important de connaître l'état vertical de l'écran de l'appareil en temps réel.
window.orientation属性与onorientationchange事件
window.orientation : Cet attribut donne l'orientation de l'écran de l'appareil actuel, 0 signifie écran vertical, plus ou moins 90 signifie mode écran horizontal (gauche et droite)
onorientationchange : cet événement de fenêtre sera déclenché à chaque fois que la direction de l'écran change entre les écrans horizontaux et verticaux. L'utilisation est similaire aux événements traditionnels
1 : Utilisez la fonction de rappel de l'événement onorientationchange pour ajouter dynamiquement des balises de corps. Ajoutez un attribut appelé orient et définissez le style correspondant en CSS sous la forme body[orient=landspace] ou body[orient=portrait], afin que différents styles puissent être affichés dans différents modes d'écran. L'exemple de code suivant :
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
body[orient=landscape]{
background-color: #ff0000;
}
body[orient=portrait]{
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<p>
内容
</p>
<script type="text/javascript">
(function(){
if(window.orient==0){
document.body.setAttribute("orient","portrait");
}else{
document.body.setAttribute("orient","landscape");
}
})();
window.onorientationchange=function(){
var body=document.body;
var viewport=document.getElementById("viewport");
if(body.getAttribute("orient")=="landscape"){
body.setAttribute("orient","portrait");
}else{
body.setAttribute("orient","landscape");
}
};
</script>
</body>
</html>2 : Une idée similaire n'est pas implémentée via les sélecteurs d'attributs CSS. L'implémentation du code suivant :
<. 🎜>
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<p>
内容
</p>
<script type="text/javascript">
(function(){
var init=function(){
var updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
break;
}
document.body.parentNode.setAttribute("class",orientation);
};
window.addEventListener("orientationchange",updateOrientation,false);
updateOrientation();
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</body>
</html>Utiliser la méthode de requête multimédia
Il s'agit d'un moyen plus pratique, en utilisant du CSS pur pour réaliser la fonction correspondante, comme le montre la démonstration de code suivante :
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait){
body {
background-color: #00ff00;
}
}
</style>
</head>
<body>
<p>
内容
</p>
</body>
</html> Si le navigateur mobile cible ne prend pas en charge la requête multimédia et que window.orientation n'existe pas, nous devons utiliser une autre méthode pour y parvenir - utilisez une minuterie pour comparer le rapport entre la hauteur (window.innerHeight) et la largeur (window.innerWidth) de la fenêtre actuelle en "pseudo temps réel" afin de déterminer l'état actuel de l'écran horizontal et vertical. Comme indiqué dans le code suivant :
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>按键</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}
.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";
document.body.parentNode.setAttribute("class",orientation);
};
var init=function(){
updateOrientation();
window.setInterval(updateOrientation,5000);
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<p>
内容
</p>
</body>
</html> En intégrant les deux solutions ci-dessus, une solution multi-navigateurs peut être obtenue, le code suivant :
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Fuite du téléphone portable Samsung Galaxy S25 Ultra : 6,86 pouces, rapport écran/corps horizontal 94,1 %
Aug 17, 2024 pm 01:49 PM
Selon les informations du 17 août, la source @ibinguniverse a publié aujourd'hui sur Weibo, déclarant que la taille exacte de l'Apple iPhone 16 Pro Max est de 6,88 pouces et que la taille exacte du Galaxy S25 Ultra est de 6,86 pouces. . Des sources indiquent que le Samsung Galaxy S25 Ultra a un corps plus étroit et un écran plus large que le S24 Ultra, avec un rapport écran/corps horizontal de 94,1 %, tandis que le rapport écran/corps horizontal du S24 Ultra est de 91,5 %. Fenye a vérifié le Weibo de la source. Il a également commenté les photos récemment exposées de l'iPhone 16 Pro Max et a estimé qu'il était erroné d'être proche d'une micro-courbe. Le téléphone est en fait un écran droit + un verre 2,5D.
Le « Tandem OLED » a été popularisé par Apple. En quoi est-il meilleur que l'OLED ?
Aug 19, 2024 am 04:42 AM
Même si Apple a été critiquée pour son manque d’innovation ces dernières années, Apple n’est pas toujours resté immobile. Au moins en termes de conception matérielle, avec le soutien des prix unitaires élevés des produits Apple, ses ingénieurs peuvent facilement essayer de nouvelles technologies sans avoir à considérer trop de problèmes de coûts. Par exemple, l'iPad Pro, en tant que terrain de test de « technologie d'affichage » préféré d'Apple, l'iPad Pro a été à la pointe de la technologie d'affichage pour les appareils intelligents portables, du miniLED en 2021 au tandem OLED en 2024. Bien que l'iPad Pro ne soit pas le premier appareil intelligent portable équipé d'un écran miniLED (MSI a sorti un ordinateur portable miniLED un an plus tôt qu'Apple), lorsque l'on compare les paramètres des deux, on se rend vite compte qu'ils ne sont pas les mêmes.
Hynix est le premier à présenter la mémoire flash UFS 4.1 : basée sur les particules V9 TLC NAND
Aug 09, 2024 pm 03:33 PM
Selon les informations du 9 août, lors du sommet FMS2024, SK Hynix a présenté ses derniers produits de stockage, notamment la mémoire flash universelle UFS4.1 dont les spécifications n'ont pas encore été officiellement publiées. Selon le site officiel de la JEDEC Solid State Technology Association, la dernière spécification UFS actuellement annoncée est UFS4.0 en août 2022. Sa vitesse d'interface théorique atteint 46,4 Gbit/s. On s'attend à ce qu'UFS4.1 améliore encore la transmission. taux. 1. Hynix a présenté des produits de mémoire flash à usage général de 512 Go et 1 ToBUFS4.1, basés sur une mémoire flash V91TbTLCNAND à 321 couches. SK Hynix a également présenté des particules de 3,2 GbpsV92TbQLC et 3,6 GbpsV9H1TbTLC. Hynix présente un modèle basé sur V7
La première caméra sous-écran 1,5K ! Le Nubia Z70 Ultra est là : le premier véritable téléphone plein écran Snapdragon 8 Gen4 au monde
Aug 19, 2024 pm 03:47 PM
Selon les informations du 19 août, Nubia adhère au véritable design plein écran depuis la sortie du Z50 Ultra et explore continuellement le domaine de la photographie proactive sous des écrans à pixels élevés. Aujourd'hui, le blogueur numérique Wisdom Pikachu a annoncé que le Nubia Z70 Ultra, qui sortira au second semestre de cette année, fera ses débuts avec la technologie de caméra sous l'écran 1,5K, qui est la solution UDC la plus haute résolution du secteur. loin. Il est rapporté que la solution proactive sous écran de ZTE est passée à la sixième génération. La dernière solution proactive sous écran est disponible dans les séries Nubia Z60 Ultra et Red Magic 9S Pro. La résolution de l'écran est de 2480x1116, soit une résolution comprise entre 1080P et 1,5K. Cette fois, Nubia dépassera les limites des résolutions existantes et établira une nouvelle référence dans l'industrie.
Apple et Huawei voulaient tous deux créer un téléphone sans bouton, mais Xiaomi l'a fait en premier ?
Aug 29, 2024 pm 03:33 PM
Selon les rapports de Smartprix, Xiaomi développe un téléphone mobile sans bouton nommé « Suzaku ». Selon cette nouvelle, ce téléphone mobile nommé Zhuque sera conçu avec un concept intégré, utilisera une caméra sous l'écran et sera équipé d'un processeur Qualcomm Snapdragon 8gen4. Si le plan ne change pas, nous verrons probablement son arrivée en 2025. . Quand j'ai vu cette nouvelle, j'ai pensé que j'étais de retour en 2019 - à cette époque, Xiaomi a lancé le téléphone concept Mi MIX Alpha, et le design sans bouton avec écran surround était assez étonnant. C'est la première fois que je vois le charme d'un téléphone portable sans bouton. Si vous voulez un morceau de « verre magique », vous devez d'abord tuer les boutons. Dans « La biographie de Steve Jobs », Jobs a exprimé un jour qu'il espérait que le téléphone portable pourrait être comme un morceau de « verre magique ».
Pour exécuter localement le modèle Gemini Nano AI de Google, le téléphone Samsung Galaxy S25 Ultra s'est révélé être équipé de 16 Go de mémoire.
Jul 31, 2024 pm 05:55 PM
Selon l'actualité du 31 juillet, la source @ibinguniverse a posté un tweet sur l'équipé de 16 Go de mémoire. Mise à jour de la capacité de mémoire des téléphones mobiles Samsung Samsung a lancé 16 Go de mémoire sur les téléphones mobiles Galaxy S20 Ultra et Galaxy S21 Ultra. À partir du Galaxy S22 Ultra, y compris le dernier téléphone mobile phare Galaxy S24 Ultra, la capacité de mémoire des téléphones mobiles Samsung est limitée à 12 Go. Il est rapporté que les prochains Samsung Galaxy S25 et Galaxy S25+ utiliseront 12 Go LPDD
Samsung fournira des écrans pour les casques MR de Microsoft, et les appareils devraient être plus légers et avoir des écrans plus clairs
Aug 10, 2024 pm 09:45 PM
Récemment, Samsung Display et Microsoft ont signé un important accord de coopération. Selon l'accord, Samsung Display développera et fournira des centaines de milliers de panneaux OLEDoS pour les visiocasques de réalité mixte (MR) à Microsoft. Microsoft développe un appareil MR pour le contenu multimédia tel que les jeux et les films. Il sera lancé une fois les spécifications OLEDoS finalisées, destiné principalement au domaine commercial, et devrait être livré dès 2026. Technologie OLEDoS (OLED sur silicium) OLEDoS est une nouvelle technologie d'affichage qui dépose des OLED sur un substrat de silicium. Par rapport aux substrats en verre traditionnels, elle est plus fine et comporte des pixels plus élevés. Écran OLEDoS et affichage ordinaire
Fuite de la configuration de la série Huawei Mate 70 : toutes les séries ont des écrans 1,5K et de très grosses batteries
Aug 08, 2024 pm 10:21 PM
Selon les informations du 8 août, les informations détaillées sur la configuration des téléphones mobiles de la série Huawei Mate70 ont été récemment dévoilées. Cette série de téléphones mobiles devrait être commercialisée au quatrième trimestre 2024. 1. Selon les rapports, l’ensemble de la série Mate70 utilisera des écrans personnalisés de résolution 1,5K de haut niveau pour répondre aux exigences des utilisateurs en matière de clarté d’écran. Il est prévu que le Huawei Mate70Pro et la version à coupe extra-large soient équipés d'écrans de quatrième profondeur, tandis que le Mate70 standard pourrait adopter un design d'écran droit légèrement plus petit. En plus des mises à niveau d'écran, la série Huawei Mate70 sera également équipée de batteries de très grande capacité avec de nouveaux matériaux de base, ce qui annonce une percée dans la durée de vie de la batterie des téléphones mobiles de la série Huawei Mate. Bien que Huawei développe une technologie de déverrouillage par empreinte digitale par ultrasons, la série Mate70 de cette année ne sera pas équipée de cette fonctionnalité. ce
