编辑：

Question

感谢您抽出宝贵时间阅读本文，并在此过程中帮助Internets了解您的回复。

我有一个在WordPress 4.0.1上运行的响应式网站。

创建页面并向其发布内容后，我注意到我发布的一个iframe没有响应，在小屏幕的移动设备上看起来不太好（iPhone 4 / 4S / 5 / 5S）。即使我通过CSS使用供应商的解决方案来使iframe响应，但在具有小屏幕的移动设备中它仍然不能很好地呈现。

所以我继续为每个移动设备屏幕创建了不同的iframe。

现在我希望能够在我的页面上放置一些代码，以便检测用户的屏幕水平分辨率并加载最适合该分辨率的iframe 。

例如，

IF用户屏幕小于305 THEN

适用于iPhone 5S的IFRAME

如果是的话 IF用户屏幕小于355 THEN

iPhone 6的IFRAME

ELSE

支持所有其他宽度的IFRAME

使用WordPress完成此操作的最佳方法是什么？

我尝试使用我自己的iframe重新使用以下两个分辨率中的代码，但它们不起作用：

http://www.codingforums.com/javascript-programming/198521-help-if-else-statement-loading-iframe-based-resolution.html

Load Iframe based on screen width

非常感谢您的帮助！

Answer 1

如果您正在寻找一个简单的非JavaScript解决方案，您可以使用CSS文件末尾的CSS媒体查询来完成此操作。（如果你使用WP，也许会更容易。）

例如:(来自https://css-tricks.com/snippets/css/media-queries-for-standard-devices/）

   /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

将iFrame的默认“显示”样式设置为无。然后使用上述媒体查询中的样式为要显示的iframe设置 display：block; 。

Answer 2

我建议你使用fitvids.js它是更好的解决方案，它会照顾你所有的iframes屏幕分辨率，这是我为你做的一个例子：

一个轻量级，易于使用的jQuery插件，用于流体宽度视频嵌入。

<强> OFFICIAL WEB PAGE

<强> LIVE DEMO

<div class="container">
        <iframe width="560" height="315" src="http://www.youtube.com/embed/SZEflIVnhH8" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="container-2">
        <iframe src="http://player.vimeo.com/video/23534361" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/23534361">The Animated Envato Community Podcast</a> from <a href="http://vimeo.com/activetuts">Activetuts+</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
    </div>

    <div class="container">
        <iframe src="http://demo-video-site.com" frameborder="0" allowfullscreen id="custom"></iframe>
    </div>

不要忘记添加Jquery和FitVids.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.map"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.1.0/jquery.fitvids.min.js"></script>

使用此 Jquery 插件，您不必为插件为您完成所有工作的每个分辨率设置不同的媒体查询！

编辑：

根据屏幕尺寸加载不同的iframe，这是一个jQuery解决方案：

<script type="text/javascript">

$(document).ready(function()
{
if($(window).width() < 1500)
  $('#IFRAMEID').attr("src","Your URL");
else
  $('#IFRAMEID').attr("src","Your URL");
});

</script>

您可能需要在iframe中添加ID，如下所示：

<iframe id="IFRAMEID" src="public.tableausoftware.com/views/Resume-Dashboard-iPhone5S-P/…; width="305" height="870"></iframe> 

<iframe id="IFRAMEID" src="public.tableausoftware.com/views/Resume-Dashboard-Web-Automatic/…; width="940" height="970"></iframe>

Answer 3

感谢所有人花时间发布你的答案，不幸的是，他们没有为我工作，这可能是由于我缺乏对Web / CSS编程的理解。

花了几个小时做了一些研究后，下面的代码对我有用：

<script type='text/javascript'>

var iPhone5S ='<iframe src="https://www.YOUR_IFRAME_URL_GOES_HERE.COM" width="305" height="860"></iframe>';
var iPhone6 = '<iframe src="https://www.YOUR_IFRAME_URL_GOES_HERE.COM" width="354" height="860"></iframe>';
var Web = '<iframe src="https://www.YOUR_IFRAME_URL_GOES_HERE.COM" width="940" height="970"></iframe>';

if (document.width < 321)
{document.write (iPhone5S)}
else if (document.width < 376)
{document.write (iPhone6)}
else
{document.write (Web)}

</script>

代码的工作原理如下：

var 声明名称/设备类型及其对应的iframe，然后 IF 语句，根据文档宽度返回您声明的iframe以匹配用户屏幕宽度的iframe

希望这对帮助我的互联网有所帮助！

根据用户的屏幕宽度加载不同

3 个答案:

编辑：