How to set two different iframe heights in Jquery for Desktop and Mobile Devices?

Question

This is my iframe code

    <iframe src="http://myurl.com" opacity="0" scrolling="no" margin-top="10px" marginwidth="0" marginheight="0" align="middle" frameborder="0" width="100%" height="215px"></iframe>

I just want to use two different iframe heights for Desktop and Mobile Devices. For e.g. For Desktop Devices iframe height shoule be 215px For Mobile Devices (Android, Iphone, Ipad) iframe height shoule be 415px

How can i do this from Jquery ?

Don't use JS for this. CSS [Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) were invented for this exact reason. — Rory McCrossan, Aug 17 '17 at 09:23
Maybe you can refer to this https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery — j.f., Aug 17 '17 at 09:24
Also, please copy+paste any relevant code in to the question. Images of code are almost useless. — Rory McCrossan, Aug 17 '17 at 09:24
Thank You. Can you please help me with exact css code to do this ? — Ashu, Aug 17 '17 at 09:27

score 0 · Answer 1 · answered Aug 17 '17 at 09:32

0

Set it with CSS and use CSS Media Queries to determine screen width and set styles according to that.

iframe { height: 300px }

@media only screen and (max-width: 800px) { 
  iframe { height: 500px }
}

answered Aug 17 '17 at 09:32

Zonf

67
1
8

How to set two different iframe heights in Jquery for Desktop and Mobile Devices?

1 Answers1