I'm testing my app on a Huawei G535 and the layout is way out of position and the buttons do not click. I am using Ionic 2. I tested this on my emulator and browser and everything is fine. I don't have another phone to test it on, but if there is a problem on my phone, then I think it could affect other phones as well.
Android info (if helpful)
- Resolution: 540 x 960
- Android Version: 4.3
- Emotion UI version: EmotionaUI 2.0 Lite
- Baseband version: 100131
Code for my page.
<ion-header>
<ion-navbar color="primary">
<ion-title>
Title
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list no-lines>
<ion-item *ngFor="let item of items | async">
<ion-avatar item-left>
<img src="{{item.image}}"/>
</ion-avatar>
<h1>{{item.title}}</h1>
<button ion-button clear item-right large (click)="showItem(item)">
<ion-icon name="arrow-dropright"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-content>
After looking around I saw it could be outdated ionic version as the problem. So I update my ionic app to the latest version. I can now use the button to navigate to another page on my Huawei phone. But the buttons and positions are still wrong. The list is shown as compressed list all on the left side of the phone, the title in the navbar has no margin. When I get to the other page, the back arrow button is above the title on the navbar and the button to a link does not work.
As you can see it is not like what is shown here http://ionicframework.com/docs/v2/components/#thumbnail-list
Any advice on what could be wrong? Many thanks
UPDATE
I created a new ionic 2 and only changed the home.html file to a list. But it is the same outcome.
I do no get any console errors. It seems to be the padding and margin of the ionic app.
Check in official website .It says Ionic 2 support goes as back as 4.4 .
If you want to support further back, you will have to use crosswalk. Useful links:
1.ionic blog
2.A tutorial link