0

我正在尝试根据屏幕尺寸修改链接-使用嵌入在 iframe 中的单独视频供稿用于许多预定的屏幕尺寸，因此我无法使用 CSS 媒体查询。

例如

<iframe src="desktopVideoFeed.html" width="300" height="300">
</iframe>

修改为

<iframe src="mobileVideoFeed.html" width="200" height="200">
<iframe>

ETC ..

我对 JavaScript 不太熟悉，但我认为它是完成这项工作的最佳工具。这是我希望实现的代码：

window.resize(function(){
    if(screen.width <= 480){
        document.getElementByTagName('iframe').src = 'mobileVideoFeed.html';
    }else if (screen.width <= 780){
        document.getElementByTagName('iframe').src = 'tabletVideoFeed.html';
    }else if(screen.width <= 960){
        document.getElementByTagName('iframe').src = 'desktopVideoFeed.html';
    }
})

我是否以错误的方式处理这个问题？

4

2 回答 2

0

也许更安全的方法是完全避免使用 iframe（对我来说，它们之前在 iOS 设备上已经多次烦人）并使用 CSS 而不是 Javascript 以不同方式呈现页面。

<style>
/* Main CSS here, optimized for desktop. */

@media only screen and (max-width: 780px), only screen and (max-device-width: 780px)
{
/* Optimizations for tablet screen sizes */
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)
{
/* Optimizations for phone screen sizes */
}
</style>

这可能需要改变对 HTML 页面布局的思考方式，但最终可能会让事情变得更容易。

于 2013-03-03T00:41:35.947 回答
0

navigator.userAgent您可以使用属性（可以包含“iPad”、“iPhone”等，以便检查它是否包含这些关键字，而不是检测屏幕宽度。

示例：我的是Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.97 Safari/537.22.

另一个例子：iPhone 测试：

if (/iPhone/i.test(navigator.userAgent)) ...

方便的网站：http ://detectmobilebrowsers.com/

于 2013-03-02T23:48:32.833 回答