网页缩放取决于设备尺寸

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查询来为视口尺寸定义特定的CSS。