Dynamically change ion-content mode depending on screen size

How to change dynamically ion-content mode="ios". On very small screen sizes my layout is broken but only on ios device since it has bigger paddings around elements. I tried to do it in two ways but both didn’t work for me:

@Component({
  template: `
    <ion-content mode="{{mode}}"><ion-content>
    <ion-content [mode]="mode"><ion-content>
  `
})
export class Some {
  mode: string = 'md'
}

Manually setting mode='md' works:

// On IPhone 5
@Component({
  template: `
    <ion-content mode="md"><ion-content>
  `
})
export class Some {
  mode: string = 'md'
}

#Ionic 5

1 post - 1 participant

Read full topic