Seperate html files for desktop web build

Ionic Framework
1

Hi,

We’re having a hard time making our mobile app working in desktop and looking good. So a little while ago nativescript announced seperate html files for dekstop and mobile which are being chosen during the build process. Is there any way this could come to ionic ?

Currently components just dont look good on a desktop. I tried following https://blog.ionicframework.com/tips-tricks-for-ionic-on-desktop/ but a lot of this applies to ionic 3 using sass.

If there are any guides out there to make ionic 4 look good on desktop that would be appreciated.

With best regards,
Robin

2

I would be interested too, something between design and tech. “officially” the only thing which pop up in my mind would be the blog post about SplitPane

P.S.: What I could share regarding this particular subject is the following css:

.big-screen-content {
  @media only screen and (min-width: 540px) {
      margin: auto;
      width: 80%;
  }
}

I use it in my pages in order to shrink the content so it looks a little bit less wide, more compact. like

<ion-content>
  <div class="big-screen-content">

or

<ion-content>
   <ion-slide class="big-screen-content">

etc.

3

For that you could still use i believe inside your ion-content, the only problem being you’re header and for example tabbar wont shrink

4

Maybe yep, but what I did above is used in prod and works fine, I’m happy to not touch it :wink: Anyhow just wanted to share, nothing else nothing more

1 Like
5

I think it would be great to have separated templates according to the platform. I just tried to see how my app would fit for desktop and it’s plain terrible ^^

6

Hello,

maybe it helps using ngif, ngclass, etc. to render platform depended html.

Best regards, anna-liebt