html - Webapp 布局取决于设备

Question

嗨，我是编程新手，我正在尝试使用 Polymer3 构建一个渐进式 Web 应用程序，我想在桌面中打开它时以特定布局显示 Web 应用程序，并且我想以不同方式显示 Web 应用程序我在移动设备中使用它。我不知道我该怎么做，有人可以把我送到正确的方向，这样我就可以解除封锁吗？

任何帮助都非常感谢。

标签： htmldompolymer-3.x

Answer 1

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

演示

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