0

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:

<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?

EDIT: An answer suggests to set the width to be a percentage value, normally 100%, so that the iframe can flex in size with the parent page. Even if I do so, it does not work:

<div id="iframe-container" style="position: relative; width: 100%; height: 1000vh;">
    <iframe width="100%" height="100%" src="https://tanzil.net/?embed=true&defTrans=ur.jawadi" style="overflow-x:hidden; overflow-y:auto;" scrolling="no" frameborder="0" id="quraniframe">
    </iframe>
</div>

Response to another answer:

  1. Adding the viewport meta tag also doesn't help
  2. The webpage I am embedding is responsive because when opened separately, no issue is faced. As soon as the webpage is embedded, the problems can be seen.
  3. The hosting server allows the content to be embedded. In fact, the webpage I am embedding is especially designed to be embedded.
  4. I have shown the testing in the video. When not embedded in the iframe, it is responsive. When embedded in the iframe, it is not responsive anymore (because it is not understanding that the iframe is being resized)
Improve this question
4
  • 1
    Cross-domain windows can't read properties accross windows. Also, the iframe size defines the window size for the iframe document, and if your CSS doesn't resize the iframe when resizing the browser window, then the responsive content doesn't know about window being resized.
    – Teemu
    Commented Jun 20 at 11:39
  • @Teemu My CSS resizes the iframe when resizing the browser window. Hence, the responsive content of the iframe knows about the window being resized. Secondly, even if I refresh the window after resizing it, the iframe behaves as if the size of the screen is the same as the size of a laptop (even if I resize the window [along with the iframe] to the size of a mobile screen, and then refresh the page so that the iframe behaves according to its size. But it doesn't)
    – Mohammad Sajjad Baqri
    Commented Jun 20 at 12:16
  • 1
    The problem appears to be, that this page does its own "device type detection", and delivers different content, based on what it thinks which scenario it is in. If I load that page in a desktop-sized browser window, then I am getting <meta name="viewport" content="width=768">. If I emulate a mobile device (iPhone 12 Pro) however and then load the page, I get <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">. But inside the iframe, it also says content="width=768" - and therefor does not behave responsive in there.
    – CBroe
    Commented Jun 20 at 12:35
  • @MohammadSajjadBaqri All the suggested changes to the viewport meta tag should be done to the document loaded from tanzil.net. Presumably you can't access that document source, hence there's nothing you can do.
    – Teemu
    Commented Jun 20 at 14:16

2 Answers 2

Reset to default
1

The problem is that you have a fixed width on your iframe tag of 770, this means that the page in the iframe will always see its window size as being this width.

You need to set the width to be a percentage value, normally 100%, so that the iframe can flex in size with the parent page. This probably then means you need to dynamically set the height of the iframe, rather than give it a fixed with.

You might find the iframe-resizer library useful if you now need dynamic content height for your iframe.

Improve this answer
-1

If the content within your iframe is not responsive, there are a few steps you can take to address this issue:

  1. Viewport Meta Tag: Ensure that your HTML document includes the viewport meta tag in the <head> section:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    This tag ensures the browser renders the content based on the device's width, which is crucial for responsiveness.

  2. Responsive Styles: Check if the content inside the iframe has CSS styles that define fixed widths or heights. Replace fixed sizes with percentages or use max-width: 100%; to allow the content to adjust to different screen sizes.

  3. Cross-Origin Issues: If the iframe content is from a different domain, ensure that the server hosting the content allows it to be embedded and that the content itself is designed to be responsive.

  4. Testing: Test the responsiveness by resizing the browser window. If the content adjusts accordingly, it indicates that the responsive design is working. If not, you may need to revisit the CSS styles within the iframe content.

  5. Embedding Best Practices: Consider using responsive embeds provided by frameworks like Bootstrap or media-specific embedding techniques that inherently support responsiveness.

By addressing these points, you should be able to make the content within your iframe responsive and adapt well across different devices and screen sizes.

Improve this answer
1

Not the answer you're looking for? Browse other questions tagged or ask your own question.