Differences between browser and phone

Ionic Framework ionic-v3
1

Hi guys, I actually have an issue, that’s what I see in my browser :

image
problème menu.PNG385×599 17.8 KB

and on Ionic View I see this :

image
probleme menu.PNG750×1334 36.8 KB

How I am suppose to deal with it ? Thanks for your answers

2

Your browser is viewing it as if it was an Android device (Material Design, md), where as since you have an iPhone it shows the iOS design. If you are using Chrome, you can select a “device” (it simply changes the User Agent) when in developer mode.

Edit: Same goes for Windows phone, that also has it’s own design. You shouldn’t make them all use the same, because this is there so that the app feels native for whichever OS you’re using.[/details]

Edit 2: Ignore the above. I’m dumb, I think I realize the point now. 1 sec.

3

if you serve using

ionic serve --lab

you will be able to see the look and feel as on real device on for ios/android/Wm

you also look if you have load the appropriate saas.

4

but watch, in the browser there is the Android device but also the Apple, and the result is the same :

image
probleme menu.PNG904×607 33.9 KB

5

yeah that’s what I use :smiley:

6

Alright now that I actually understood the point of your queston, I think that some code would be useful :slight_smile: How does the HTML look for your list?

1 Like
7

No problem don’t worry, and thanks for your time ! :slight_smile: my html code is the following :

image
menu app.PNG726×722 104 KB

8

I think it’s because you’re using the ion-list inside of a card. But before messing with that, try wrapping each button in an ion-item. So that it goes

ion-card
  ion-list
    ion-item
      button
    ion-item
      button
    ion-item
      button

If that still doesn’t fix it, try removing the card as well and use ion-list-header instead. Just before any of the items, like so

ion-list
  ion-list-header
  ion-item
    button
  ion-item
    button
  ion-item
    button

Edit: OR put the ion-list inside of an ion-card-content, if you want to keep the card

9

The problem is that if I use ion-item for my buttons, they aren’t as big as I want. They become little like on Ionic View but I want them big like in the browser… Not sure I’m clear ?

10

For me you have a css issue here. wome mess up while compiling the saas. is it possible to show your scss?

11

Oohhh you want them to be big … In that case, I think you need to get rid of the ion-list and completely make your own styling for the list. Something is overwriting your styling with the “native” one on compile. If you make your own list css, you also wont mess up the normal ion-list, in case you want to use that eventually :wink:

2 Likes
12

I actually don’t have any scss an this page…

13

Okay thanks guy :wink: