Webapp layout depending on device

Question

Hi there I'm new to programming and I'm trying to build a progressive web app with Polymer3, I want to display the web app with a specific layout when I open it in a desktop and I want to display the web app differently when I use it in a mobile device. I don't know how can I do that, can someone send me in the correct direction so I can unblock myself?

Any help is more than appreciated.

Answer 1

If you want two different layout due to device type here below code may help you:

DEMO

    static get template() {return `
    <template is='dom-if' if='[[mobileDevice]]'>
     .... Mobile device Layout
    </template>
    <template is='dom-if' if='[[!mobileDevice]]'>
     .... Desktop device Layout
    </template>'

    ... 
    //
    ready(){
      super.ready()
      if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
        // Mobile device
        this.set('mobileDevice', true);
      } else {
        // Desktop
        this.set('mobileDevice', false);
      }
   }