Question

所以在this site上，我制作了一个iframe，并试图让宽度适合移动。但是，当我在我的iPhone上访问它时，它只显示很小。

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

我将不胜感激任何帮助！

Answer 1

您忘记在头部添加meta viewport标记。视口因设备而异，在手机上比在电脑屏幕上要小。

在head部分

中添加此元数据

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

对于移动设备，如果希望iframe占据移动广告的全宽，只需制作width:100%

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的iframe使用width的内联300px，但您的媒体查询定位的宽度为500px。如果您希望iframe显示移动设备的全宽，只需在width="300px"中将width="500px"更改为.container-mobile即可增加移动视图的宽度。

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

希望这有帮助！：）

适合移动设备的iframe CSS

2 个答案: