Comment adapter ionic2 aux téléphones mobiles, tablettes et autres appareils

Cet article présente principalement l'exemple de code d'adaptation d'écran ionic2 pour s'adapter aux téléphones mobiles, tablettes et autres appareils. Il a une certaine valeur de référence et les amis intéressés peuvent s'y référer.

Cet article présente l'exemple de code pour l'adaptation de l'écran ionic2 à adapter aux téléphones mobiles, tablettes et autres appareils. Je voudrais le partager avec vous. Les détails sont les suivants :

Le recommandé. L'éditeur est : VS code (Visual Studio Code) => Uniquement responsable de l'édition des documents, pas de la compilation.

Et WebStorm a la vérification et la compilation, etc. Lorsque ionic1 a été développé, il était très pratique d'utiliser le navigateur pour cliquer sur le bouton pour parcourir l'effet à tout moment. Cependant, après avoir développé ionic2, ionic2. a une vérification et une compilation automatiques, qui seront affichées sous forme de carte Webstorm Pause, ne peuvent pas être modifiées.

1. Ajoutez d'abord un côté comme test

Le projet que j'utilise est sidemenu

dans le répertoire du projet Exécutez la commande suivante : ionic g page page4

2. Exécutez la commande pour ouvrir le débogage du navigateur

Ionic serve

3. Modifiez le contenu du fichier page4.html comme suit :

<ion-header > 
 <ion-navbar > 
  <button ion-button menuToggle> 
   <ion-icon name="menu"></ion-icon> 
  </button> 
  <ion-title>title</ion-title> 
 </ion-navbar> 
</ion-header> 
 
 
<ion-content style="background-color: #abaaaa;"> 
  <ion-grid style="height: 100%; display: flex; padding: 0px;"> 
    <ion-row style="background-color: #abaaaa; flex: 2;">  
     <ion-col style="flex: 1; padding: 10px 10px 5px 10px; " > 
      <ion-card style="height: 100%; width: 100%; margin: 0px; background-color: #cdcecf"> 
        <ion-card-content style="height: calc(100% - 30px);"> 
         card content 
        </ion-card-content> 
      </ion-card> 
     </ion-col> 
    </ion-row> 
    <ion-row style="background-color: #abaaaa; flex: 4;">  
     <ion-col style="flex: 1; padding: 5px 10px 10px 10px; " > 
      <ion-card style="height: 100%; width: 100%; margin: 0px; background-color: #434343"> 
 
        <ion-card-content style="height: calc(100% - 30px);"> 
         content 
        </ion-card-content> 
       </ion-card> 
      </ion-col> 
    </ion-row> 
  </ion-grid> 
</ion-content>

En fait, le la référence ici est c451b5e45e08268c0a8b36c1ede368d371cd1212cbe2291f84c43022a5f5450f, ce code montre comment ionic2 implémente une disposition dynamique d'auto-utilisation

4. Effet de test :

Utilisez la souris pour faire glisser la bordure du navigateur pour ajuster la taille de la page, et les éléments de la page qui développeront des ions se déformeront également avec la taille dynamique. Lorsque ce logiciel est compilé dans le package d'installation de la plateforme. Par exemple, si Android est compilé, la page s'adaptera à l'écran Android. Mise en œuvre de l'adaptation de l'appareil à différentes tailles d'écran.

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!