移动友好的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

回答

相关问题