移動友好的iframe CSS

所以在this site，我做了一個iframe，並試圖使寬度適合移動。但是，當我在iPhone上訪問它時，它顯示的很小。移動友好的iframe CSS

這裏是我的代碼：

.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>

我希望得到任何幫助！

來源

2017-09-11 Ari Kiani

您忘了在頭部添加meta viewport標籤。視窗因設備而異，在手機上比在電腦屏幕上小。如果想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>

來源

2017-09-11 04:44:25

非常感謝！這固定了，但寬度現在有點超大我的窗口 - 我做了100％的寬度，發佈到同一頁面的變化 - 你知道什麼似乎是怎麼回事？ –

也出於某種原因，背景是超級模糊的 - 如果您最小化桌面上的該鏈接上的窗口，它會顯示移動網站的背景圖像 - 但由於某種原因使用iframe使其超模糊 - 對不起，我是這個新手 –

沒關係 - 它不再延伸！我想現在唯一的問題是模糊的bg和仍然圍繞整個iframe的白色邊框，即使我嘗試用css修復它 –

你的iframe移動設備

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

：

在head部分添加該元是usi ng的內聯width，但您的媒體查詢的目標寬度爲500px。如果您希望自己的iframe顯示移動設備的全寬，只需在.container-mobile中將width="300px"更改爲width="500px"即可增加移動視圖的寬度。

.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>

希望這有助於！ :)

來源

2017-09-11 04:45:13

移動友好的iframe CSS

回答

相關問題