Javascript 使用媒体查询在iframe视口较小时显示图像_Javascript_Html_Css

Javascript 使用媒体查询在iframe视口较小时显示图像

javascript html css

Javascript 使用媒体查询在iframe视口较小时显示图像,javascript,html,css,Javascript,Html,Css,我想在400px的方形iframe中显示demo.html页面。当视图端口小于400px时，demo.html应仅显示图像。稍后，当我在demo.html中单击该图像时，相同的页面应呈现为全屏模式例如，您可以嵌入slideshare.com中的幻灯片，然后单击全屏图标以全屏呈现。我希望我的页面以类似方式呈现。您可以执行以下操作：调整小提琴的大小以查看媒体查询是否正常工作 html <body> <img src="" id="smallScreenImage" widt

我想在400px的方形iframe中显示demo.html页面。当视图端口小于400px时，demo.html应仅显示图像。稍后，当我在demo.html中单击该图像时，相同的页面应呈现为全屏模式

例如，您可以嵌入slideshare.com中的幻灯片，然后单击全屏图标以全屏呈现。我希望我的页面以类似方式呈现。

您可以执行以下操作：

调整小提琴的大小以查看媒体查询是否正常工作

html

<body>
  <img src="" id="smallScreenImage" width="500" height="500" />

  <div id="mainContentWrap">
    <div>All content goes here that should be displayed above 500px</div>
  </div>

</body>

#smallScreenImage {display: none;}
#mainContentWrap {display: block;}

@media only screen and (max-width:500px){
    #smallScreenImage {display: block;}
    #mainContentWrap {display: none;}
}