3

I am loading remote content in an iframe. Since the iframe width is smaller than the full width of the html doc, the mobile view of the site is displayed. Is there a way to force the desktop view? E.g. by "fooling" the CSS of the remote site into thinking that the width of the iframe is larger?

Minh Tri Pham
  • 861
  • 3
  • 9
  • 18

2 Answers2

2

I think what you need is something like what is request here:
How can I scale the content of an iframe?

In the comments to Ixs answer is the link with an example:
http://jsfiddle.net/dirkk0/EEgTx/show/

What you need to do is to change the zoom of the page inside the iframe to trick media queries, so the idea is that a 1000px width iframe with zoom of 0.8 will trigger a ~1200px media query. You change the values to what you need.

Community
  • 1
  • 1
RCC
  • 96
  • 7
0

Use scale and translate in an iframe:
Unfortunately, it seems that there is not a simple method to set the iframe tag as desktop view, but you can use scale and translate in iframe as following to have the desktop view of a URL in a part of your webpage. 

<div style="width:300px;height: 220px;direction: rtl;background-color:red;">
<iframe src="https://iransitemap.ir" style="transform: scale(0.28,0.28) translate(1258px,-865px);width: 1000px;height: 700px;border-radius: 50px;" ></iframe>
</div>
R. Yaghoobi
  • 459
  • 4
  • 5