網頁的縮放取決於設備尺寸

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中設置寬度和高度。您可以找到有關媒體查詢更多ifnormations Mozilla的論壇：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

你可以嘗試在DIV包裝您的元素，並嘗試添加

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

它，因此它會動態擴展到500px的一個最大寬度。您可以嘗試@media queries爲視口尺寸定義特定的CSS。