OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Contents of iframe not responsive

  • Thread starter Thread starter Mohammad Sajjad Baqri
  • Start date Start date
M

Mohammad Sajjad Baqri

Guest
There is a webpage which shows different design according to the screen size (whenever you refresh the page after changing the screen size). I have embedded this webpage in my website. However, after embedding, it is unable to show different designs according to the screen size (even after refreshing the page).

The iframe is unable to detect the screen size or the device type. For simplicity, I have separated the iframe from my website. Here is the simplified iframe:

Code:
<iframe iframe width="770" height="1000" src="http://tanzil.net/?embed=true&defTrans=ur.jawadi" style="overflow-x:hidden; overflow-y:auto;" scrolling="no" frameborder="0"></iframe>

I have created a video to demonstrate the problem in case you are unable to understand it. In the earlier part of the video, I have shown how the webpage (that is to be embedded) behaves normally. Then, in the second part of the video, I have embedded the same webpage in an iframe and now it does not behave normally (it does not change the design according to the screen size even after refreshing the page). Is there any way I can tell the iframe the device type, or tell it behave normally (just like it was not embedded)? Is there any method to fool the iframe into thinking that it is not being embedded so that it doesn't cause any problems?

<p>There is a <a href="https://tanzil.net/?embed=true&defTrans=ur.jawadi" rel="nofollow noreferrer">webpage</a> which shows different design according to the screen size (whenever you refresh the page after changing the screen size). I have embedded this webpage in my website. However, after embedding, it is unable to show different designs according to the screen size (even after refreshing the page).</p>
<p>The iframe is unable to detect the screen size or the device type. For simplicity, I have separated the iframe from my website. Here is the simplified iframe:</p>
<pre><code><iframe iframe width="770" height="1000" src="http://tanzil.net/?embed=true&defTrans=ur.jawadi" style="overflow-x:hidden; overflow-y:auto;" scrolling="no" frameborder="0"></iframe>
</code></pre>
<p>I have created a <a href="https://drive.google.com/file/d/1Jlxfkai8YcKkpTobeUkhy44EXPAdYCcv/view?usp=sharing" rel="nofollow noreferrer">video</a> to demonstrate the problem in case you are unable to understand it. In the earlier part of the video, I have shown how the webpage (that is to be embedded) behaves normally. Then, in the second part of the video, I have embedded the same webpage in an iframe and now it does not behave normally (it does not change the design according to the screen size even after refreshing the page). Is there any way I can tell the iframe the device type, or tell it behave normally (just like it was not embedded)? Is there any method to fool the iframe into thinking that it is not being embedded so that it doesn't cause any problems?</p>
 

Latest posts

Top