如何通过更改屏幕尺寸来更改iframe src

Question

I'm attempting to modify an link based on the screen size - using separate video feeds embedded in an iframe for a number of predetermined screen sizes, so I'm unable to use CSS media-queries.

eg

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

modified to

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

etc ..

I'm not too familiar with JavaScript but I assume it'd be the best tool for the job. Here's the code I'm hoping to implement:

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';
    }
})

Am I approaching this in the wrong way?

Answer 1

Instead of detecting the screen width, you could use the navigator.userAgent property (which can contain "iPad," "iPhone," etc., so you can check to see whether it contains these keywords.

Example: mine is Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.97 Safari/537.22 .

Another example: iPhone test:

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

Handy site: http://detectmobilebrowsers.com/

Answer 2

Maybe a safer way would be to avoid the use of iframes entirely (for me they have been annoying on iOS devices several times before) and render the page differently using CSS, instead of 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>

This may need some change in way of thinking about the page layout with HTML, but maybe it makes things easier eventually.