如何制作ionic应用程序在手机和PC浏览器上使用？

Question

我有一个由 ionic 2 设计的可在浏览器上使用的 Web 应用程序

我的网络应用程序在移动屏幕上运行良好，但是可以使其如下图所示吗？

如果可以的话我该怎么做？

Answer 1

是的，您可以使用 css 媒体查询来做到这一点。

@media only screen and (min-width: 500px) {
    body {
        width: 500px;
    }
}

希望它对你有用。

或者另一个完美的解决方案适合您。

运行此命令

ionic serve --lab

运行命令后，在浏览器右侧有一个“平台”按钮，点击它并选择您想要的平台 Android、iOS 或 Window 或全部。

Answer 2

仅按上述方式设置主体宽度就给我带来了各种各样的问题。 我用的就是这个。

@media (min-width: 500px) {
  ion-app { 
    position: relative;
    margin: auto;
    top: 0;
    bottom: 0; 
    max-width: 390px;
    max-height: 844px;
  }
  
  .input-col-web {
    // add this to any ion-columns
    margin: auto!important;
    flex: unset!important;
    width: unset!important;
    max-width: unset!important;
    min-width: 280px;
  }

  form.checkout {
    // Stripe elements
    max-width: 350px!important;
    max-height: 600px!important;
  }

  ion-modal > .ion-page {
    min-height: 700px;
  }

}