php - 如何在我的网页的特定上下文中重置 iframe 属性。不使用javascript

Question

我正在从事响应式设计。我的页面包含 iFrame

示例:

    <iframe class="frame" src="www.google.com?embed=true&width=800&height=600" style="height:100%;width:100%;border:none;">
   </iframe>

您可以观察到我还将样式指定为 width 和 height:100%，以便 iframe 以响应方式显示。

问题是当我的 iframe 像

    <iframe class="frame" src="www.google.com?embed=true" style="height:100%;width:100%;border:none;">
   </iframe>

iframe 似乎可以根据 iPhone 设备的宽度进行适当调整。

如果我提到高度和宽度，它不会根据我定义的属性调整到 iphone 的宽度。

我试过这样:CSS

     @media only screen and (max-width: 400px), only screen and (max-device-width: 400px) {
      .frame{
             width:320px;

             }
   }

但是 iframe 从容器框架中弹出。

所以我只想知道如何重置类“frame”的样式，以便在 iphone 上显示的 iframe 将具有

<iframe src="www.google.com?embed=true"></iframe>

谢谢。

Answer 1

试试这个:

<style type="text/css">

    @media only screen and (max-width: 400px) {
        .div {
            width: 300px;
        }
    }
</style>

还有更多

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}