Webapp布局取决于设备

Question

您好，我是编程的新手，我正在尝试使用Polymer3构建渐进式Web应用程序，我想在桌面上打开该应用程序时以特定的布局显示该Web应用程序，并且希望显示该Web应用程序在移动设备上使用该应用程序时会有所不同。我不知道该怎么办，有人可以按正确的方向发送我，以便我解除封锁吗？

任何帮助都倍受赞赏。

Answer 1

如果由于设备类型而需要两种不同的布局，下面的代码可能会帮助您：

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);
      }
   }