根据用户的屏幕宽度加载不同的 </iframe>

Question

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

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

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

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

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

例如，

如果用户屏幕小于 305 那么

适用于 iPhone 5S 的 IFRAME

否则如果 如果用户屏幕小于 355 那么

适用于 iPhone 6 的 IFRAME

否则

支持所有其他宽度的 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>

您可能需要将 id 添加到您的 iframe 中，如下所示：

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

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