网页的缩放取决于设备尺寸

Question

我正在开发一款平板电脑应用程序，我的容器宽度为500px，高度为800px。由于某些限制，我不能保持容器大小百分比。

由于此原因，页面无法缩放到设备宽度（横向或纵向）。

我需要将整个容器扩展到设备维度。

有没有解决方案。

提前致谢。

Answer 1

@media (min-width: 500px) and (min-height: 800px) {
  .bloc {
       width : 500px;
       height : 800px;
  }
}

@media (min-width: 1024px) and (min-height: 768px) {
      .bloc {
           width : 1024px;
           height : 768px;
      }
    }

您可以使用媒体查询来了解设备的大小，并在css中设置宽度和高度。您可以在mozilla论坛上找到更多有关媒体查询的ifnormations：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

您可以尝试在DIV中包装元素并尝试添加

max-width: 500px;
width: 100%;

以便它可以动态扩展到最大宽度500px。您可以尝试@media queries为视口尺寸定义特定的CSS。