Javascript 加载不同的</iframe>；取决于用户'；屏幕宽度

感谢您花时间阅读本文，并在此过程中帮助互联网解决您的问题

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

在创建一个页面并向其发布内容后，我注意到我发布的其中一个iFrame没有响应，在带有小屏幕的移动设备（iPhone 4/4S/5/5S）上也不好看。尽管我通过CSS使用了供应商的解决方案，使iframe具有响应性，但在带有小屏幕的移动设备中，它仍然没有表现得那么好

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

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

比如说,

如果用户屏幕小于305 然后

iPhone 5S的IFRAME

否则如果 如果用户屏幕小于355 然后

iPhone6的IFRAME

否则

支持所有其他宽度的IFRAME

使用WordPress实现这一目标的最佳方式是什么

我试着用我自己的iFrame在下面的两个解决方案中重新使用代码，但它们不起作用：

---

非常感谢您的帮助

如果您正在寻找一个简单的非javascript解决方案，您可以通过CSS文件末尾的CSS媒体查询来实现这一点。（如果使用WP，可能会更容易）

例：（来自）

---

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

我建议您使用

fitvids.js

这是更好的解决方案，它会照顾到所有的

iframe

屏幕分辨率，这里是我为您制作的一个示例：

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

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

<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插件，您不必为每个分辨率设置不同的媒体查询，插件可以为您完成所有工作

编辑： 要根据屏幕大小加载不同的

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>

$（文档）.ready（函数（）
{
如果（$（窗口）.width（）<1500）
$（'IFRAMEID'）.attr（“src”，“您的URL”）；
其他的
$（'IFRAMEID'）.attr（“src”，“您的URL”）；
});

您可能需要在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>

---

感谢大家花时间发布您的答案，不幸的是，它们对我不起作用，可能是因为我不了解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 iPhone5S=''；
var iPhone6=''；
var-Web=''；
如果（文件宽度<321）
{document.write（iPhone5S）}
否则如果（文件宽度<376）
{document.write（iPhone6）}
其他的
{document.write（Web）}

代码的工作原理如下：

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

---

希望这对互联网的帮助和对我的帮助一样大

实际上，您根本不需要任何javascript。您可以完全使用CSS来实现这一点。只需使用CSS媒体查询。Ze Rubeus，感谢您的回复。但是在代码中，我告诉它在哪里显示特定屏幕宽度的特定iframe。我无法使用1 iframe并调整其大小，因为内容无法在移动设备上正确显示。该插件将使您的iframe适应任何屏幕分辨率，因此您无需自行管理。您想显示不同的iframe是特定的屏幕宽度吗？正确，我想为每个设备显示不同的iframe屏幕宽度很好，非常感谢Ze Rebeus，这或多或少是我在寻找脚本来完成的：如果用户屏幕小于305，则显示iPhone 5S的IFRAME；否则，如果用户屏幕小于355，则显示iPhone 6的IFRAME；ELSE显示IFRAME，它支持响应@Bangkokian的所有其他宽度，但我对CSS不太熟悉。在我购买的WordPress模板中，为了添加自定义CSS，我必须将其添加到一个特殊的位置-将其添加到实际页面/帖子将无法正确生成它。在您的代码中，我在哪里输入每个屏幕分辨率的代码？我看不出设置屏幕大小将如何加载不同的iframe。将图层设置为hidden并不会将其从HTML中排除，它只是隐藏屏幕上的内容。所以，所有的内容加载。或者，我遗漏了什么？您的解决方案不可靠，请慢慢来，了解一下css和媒体查询解决方案在我的环境中对我有效，这就是为什么我标记为正确答案的原因。你的评论不可靠，因为它没有解释为什么我的答案不可靠。首先，你忽略了所有不支持JavaScript的人。媒体查询允许您处理屏幕旋转和大小调整等，您的脚本加载一个视图并坚持这一点。这段代码在非常特定的情况下被证明是有用的。一位重建网站预算较低的客户决定在Weebly中重建，并将其扩展到旧网站的某些功能中。（不是想法，但不是我的决定。）他们希望iFrame中的内容能够扩展到至少一个手机大小。（同样，不是想法，但不是我的决定。）Weebly没有一个有效的添加JavaScript的界面，但我最终能够让这段代码进行一些调整。1.Document.width已弃用，因此我使用Document.body.clientWidth 2。我没有使用变量，但我已经结束了

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