1
Guys I have a project c# MVC5 and my scenario is as follows: I have to open in a friendly url a large series of pages (with media content) made by third parties. One at a time clear (according to the parameter received) So I created this friendly URL and in my View I load this page in an iframe:
<iframe id='TourVirtual' runat='server' frameborder='0' allowFullScreen=allowFullScreen src="@ViewBag.Link" gesture="media"></iframe>
It works great on the desktop, but the responsiveness of the page that is inside the iframe does not work accordingly, it should readjust the size of buttons and images in a more appropriate way to the small screen. Since I’m an amoeba about css... I wanted to know:
How do I prepare the daughter page to be loaded into an iframe so that it maintains responsiveness? Or maybe this "preparation" is not necessary if I load the page otherwise. I accept suggestions.
UPLOAD----------------------------------------
I even tried to load the page through the back-end (Razor). with this code:
@{
string URL = ViewBag.Link;
//bool HomeH1 = Request.Url.Segments.Length == 1;
WebClient client = new WebClient();
client.Encoding = System.Text.Encoding.UTF8;
var header = client.DownloadString(URL);
}
@Html.Raw(header)
But I was unsuccessful because the path to the css and js of the page itself is passed indirectly /archivcdoscara.css then it takes the url of my site and screws it up. And I can’t change these paths, because as I said this matter is produced by third parties and there are already dozens (maybe hundreds ready) so even if you gave me permission to change the js/css routes of them would not be feasible.
UPLOAD----------------------------------------
The problem I’m trying is best exemplified in the following images:
Here as it should load (when access directly) screenshot.net/en/79q54hd
Here’s how it’s being loaded (when I use iframe) screenshot.net/en/8gowrbw
Note that instead of following the proper formatting of mobile devices, the content just shrinks in size.
First, why is there a need to load inside an iframe? the data is coming from the same site or another ? if it is the same, you can load via ajax (jquery). I believe that the problem of responsiveness is not to be loaded inside an iframe, but in the @media of the css file, which may not be set for a given portview
– Marcos Brinner
@Marcosbrinner iframe, was only the only way I found for the link not to get /uploadfiles/agenciax/569896. These pages are compiled from photos that allow navigation as in google street view. We have one for each immovable. When clicking on the link, I open in a new tab with a url amigavél meusite/tourvirtual/nomedoimovel and play the page in iframe that takes up 100% of the screen space in the browser. I even tried something else via back-end... I will now add to the end of this question.
– AlamO
You will only be able to make it responsive if the page being loaded on
iframebe prepared to be responsive.– Jorge.M
@Exact jorgematheus, as said the page css should support the dimensions of the portview media screen of a look here Alamo if you do not know how it works https://www.w3schools.com/cssref/css3_pr_mediaquery.asp , but for this you need to have access to the data of the page that is loading.
– Marcos Brinner
@Jorgematheus the parent page where I load iframe is responsive. so much so that overall the page adapts to the size. Only it does this by reducing the size of the content. Then the buttons and navigation options are very small. I believe that the daughter page that I am carrying in iframe is not able to notice that it is loaded in a smaller size and so does not adapt. Does that make sense? I will illustrate by placing here the result that I get by accessing the daughter page directly (or as it should be) and the result that I get by accessing via iframe
– AlamO
@Jorgematheus see my problem here: This link is directly loaded (without the iframe) this is how it should look: https://screenshot.net/pt/79q54hd And this is how it’s being loaded (when I use the iframe) https://screenshot.net/pt/8gowrbw
– AlamO
@Marcosbrinner see in the links of the last comment the page as it is loading in iframe and as it should be in reality (when I load directly or without iframe). Note that the controls are diminished
– AlamO
try to set the meta viewport inside the header tags of the page in the iframe
– Marcos Brinner
a look at https://stackoverflow.com/questions/4389932/how-do-you-disable-viewport-zooming-mobile-safari
– Marcos Brinner
https://www.w3schools.com/css/css_rwd_viewport.asp
– Marcos Brinner
@Marcosbrinner was just that. Thanks to those who collaborated and had patience.
– AlamO