Load different depending on user's screen width

Thank you for taking the time to read this, and help the Internets out with your response(s) in the process.

I have a responsive website that runs on WordPress 4.0.1.

After creating a Page and posting content to it, I noticed one of the iframes I posted is not responsive and does not look good on mobile devices with small screens (iPhone 4/4S/5/5S). Even though I used the vendor's solution via CSS to make the iframe responsive, it still does not render as nice in mobile devices with small screens.

So I went ahead and created different iframes for each mobile device screen.

Now I would like the ability to put some code on my page that will detect the user's screen horizontal resolution and load the iframe that would best fit that resolution.

For example,

IF User Screen is less than 305 THEN

IFRAME for iPhone 5S

ELSE IF IF User Screen is less than 355 THEN

IFRAME for iPhone 6

ELSE

IFRAME THAT SUPPORTS ALL OTHER WIDTHS

What would be the best way to accomplish this using WordPress?

I tried re-using the code in the two resolutions below with my own iframes, and they did not work:

http://ift.tt/18cBL9F

Load Iframe based on screen width

Your help would be greatly appreciated!