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

Question

感谢您花时间阅读本文，并在此过程中通过您的回复帮助互联网。

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

创建页面并向其发布内容后，我注意到我发布的其中一个 iframe 没有响应，并且在小屏幕移动设备(iPhone 4/4S/5/5S)上看起来不太好。尽管我通过 CSS 使用 vendor 的解决方案来使 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;。