適用於移動設備的iframe CSS

Question

因此，在這個網站上 ，我制作了一個iframe，並嘗試使寬度適合移動。 但是，當我在iPhone上訪問它時，它的顯示很小。

這是我的代碼：

 .container-desktop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (max-width: 500px) { .container-desktop { display: none !important; } } @media only screen and (min-width: 500px) { .container-mobile { display: none !important; } } 

 <div class="container-desktop"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="300px" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> <div class="container-mobile"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="300px" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> 

我將不勝感激任何幫助！

Answer 1

您忘記在頭部添加meta viewport標簽。 視口隨設備而異，並且在移動電話上會比在計算機屏幕上小。

在head添加此元數據：

<meta name="viewport" content="width=device-width, initial-scale=1">

對於移動設備，如果要讓iframe占據移動屏幕的整個寬度，只需將width:100%

 .container-desktop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (max-width: 500px) { .container-desktop { display: none !important; } .container-mobile { max-width:100%; } } @media only screen and (min-width: 500px) { .container-mobile { display: none !important; } } 

 <div class="container-desktop"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="300" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> <div class="container-mobile"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="100%" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> 

Answer 2

您的iframe使用的內聯width為300px ，而媒體查詢的目標寬度為500px 。 如果您希望iframe顯示移動設備的完整寬度，只需在.container-mobile width="300px"更改為width="500px"來增加移動視圖的width="300px" 。

 .container-desktop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (max-width: 500px) { .container-desktop { display: none !important; } } @media only screen and (min-width: 500px) { .container-mobile { display: none !important; } } 

 <div class="container-desktop"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="300px" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> <div class="container-mobile"> <iframe style="margin:0px !important;" src="https://kianistudios.com/vcm-2" height="100%" width="500px" marginwidth='0' marginheight='0' frameBorder="0" overflow-y='scroll' overflow-x='hidden'></iframe> </div> 

希望這可以幫助！ :)