How to adapt ionic2 to mobile phones, tablets and other devices

This article mainly introduces the sample code for ionic2 screen adaptation to adapt to mobile phones, tablets and other devices. It has certain reference value and interested friends can refer to it.

This article introduces the sample code for ionic2 screen adaptation to adapt to mobile phones, tablets and other devices, and shares it with everyone. The details are as follows:

The recommended editor is: VS code (Visual Studio Code) => Only responsible for editing documents, not compiling.

And WebStorm has checking and compilation, etc. When ionic1 was developed, it was very convenient to use the browser to click the button to browse the effect at any time. However, after developing ionic2, ionic2 will automatically check and compile, and it will be displayed as a webstorm card. Pause, cannot be edited.

1. First add a side as a test

The project I use is sidemenu

in the project directory Execute the following command: ionic g page page4

2. Run the command to open the browser for debugging

Ionic serve

3. Modify the content of the page4.html file as follows:

##

<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>

In fact, the reference here is, 2d7b4527982b06b394ed51835e595fcc, this code demonstrates how ionic2 implements dynamic self-usage layout

4. Test results:

Use the mouse to pull the browser border to adjust the page size, and the page elements that will develop ionic will also deform with the dynamic size. When this software is compiled into the platform installation package. For example, if Android is compiled, the page will adapt to the Android screen. Implemented device adaptation to different screen sizes.

The above is the detailed content of How to adapt ionic2 to mobile phones, tablets and other devices. For more information, please follow other related articles on the PHP Chinese website!