I have a page on my website in which I'm loading a purpose-built WIX marketing site inside a frame thusly:
<html><frameset cols='100%'><frame src='https://michael3557.wixsite.com/truckercert'></frameset></html>
On a pc/laptop, everything looks fine and as expected. But on a phone, the "mobile-friendliness" of the wix page is gone, and a super-narrow, unfriendly page displays.
Yet if you hit the wix link shown above directly (not inside a frame) on a phone's browser, it does look fine and mobile-friendly.
Why does my page lose its mobile-friendly nature just because it's loaded inside a frame? And how can I solve this?
The browser determines the viewport settings from the top-level document.
The frame HTML has no <meta> tag setting the viewport.
The page inside the frame is not the top-level document so its <meta> viewport data is ignored.
Related
I'm trying to apply my CSS-file to my webpage.
When I load my website, I shortly see the site rendered correctly (with my CSS-styles applied), while the page is still loaded. When the page finished loading some of the styles I defined with CSS dissappear, for example the background-color or the alignment of some texts. Sometimes when I reload the page the site is rendered normally without me changing the browser or the code. I allready tried deleting the browser cache but nothing changed. I use Google Chrome. I can see that the CSS-file must be loaded correctly, as some of the styles are applied, and the page reneders correctly while the loading processes.
This is an image of my site while loading:
This is an image of my site after loading:
Thanks for your help.
It seems like some other css or js file is loaded after your css file. please provide a link to your page or post the html.
If you use the development tools (F12) you could interspect the Network tab. here you can see whitch files are loaded and in witch order they are
I have an ASP.NET Core 3.1 site (using Asp.NET Zero) with Angular 10, in which one page has an iframe, which displays web pages from a subdomain (old VB.NET WebForms 4.0 site):
<iframe [src]="pageUrl | safeUrl" style="height: 100%;" frameBorder="0">
<p>Your browser does not support iframes</p>
</iframe>
The pageUrl variable is changed by clicking on items in a navigation bar in the Angular app.
This architecture works quite well the first 10-15 clicks. After that, each click on a navigation item downloads the requested page (Network tab shows HTTP 200 and the actual ASPX response) but the iframe does not draw the content. The whole iframe content stays white, although loaded.
There are a few symptoms that I think are important:
If I click and do not move the mouse, I see the web request fulfilled and the page stays white until I move the mouse and trigger a redraw of the menu item by the :hover event in the CSS. It can stay white for a minute if I don't move the mouse.
When the redraw happens, there is no activity in the Network tab and is definitely triggered by the mouse movement.
This "white page" effect happens even with ASPX pages that I have visited before and were displayed properly.
If somehow I move my mouse inside the iframe without triggering the redraw, I can see the mouse cursor changing when I go over a link or another element that has different cursor in the CSS.
There is nothing custom on my menu, CSS, or JS (Angular) for this behaviour.
Google did not help and pointed to "white-flash" effect, which I do not believe is what I have. So, any suggestions will be appreciated even they are not complete solutions. This issue is preventing me from going to production.
So I created an HTML GUI for a touchscreen monitor. The browser is supposed to always stay in fullscreen. Now I want to embed another website inside my HTML, which works pretty well.
My only problem now is, that when I click through the embedded webpage, new pages open without my GUI. This is a problem because I added navigation functionality to the GUI and since it always runs in fullscreen I can't use the back and forward buttons either.
So is there a way to make Firefox always open my HTML GUI, when it opens a new page and open the requested page as embedded in my GUI?
You should provide more information about how did you embed other site in your html gui.
The solution is to use <iframe> element, then all the links inside the iframe should be open in that iframe. And if you want any other link from your GUI to be open in that iframe, just add target="name_of_the_iframe" to that element, and a attribute name="name_of_the_iframe" to the iframe (ofcourse "name_of_the_iframe" is an example).
You can try using an iframe
From w3schools: "An iframe is used to display a web page within a web page."
Take a look at this link: https://www.w3schools.com/html/html_iframe.asp
In Ionic project, I had loaded my Responsive Website URL in an iFrame and it looks fine. But there are few anchor links in my website which will open a new window, for eg :
Devices List
This is working fine for Desktop browsers, but the same is not opening any new window or not even opening in default browser. Am seeing this problem only with iFrame. I tried with Different targets and also used InAppBrowser, no progress.
Might be of help to someone blocked due to this
Devices List
This will get reference to parent container window object and will work as expected.
The background of my site is black.
Every time the site reloads the browser's window blinks because the default setting of browser binary is "white background" in Chrome & Firefox.
Is there an alternative, but rebuild whole browser from sources?
Related questions:
Set page load to black instead of white background?
Flashing a White page
I'm already trying to use <body background="#000">. It doesn't help.
Is this an unresolvable problem?
Here is something you can try:
Check that your website allows browser to cache it's content so pages loads faster after viewed once
load resources (css, js, images) dynamically or bottom of body so the page is rendered faster (DOM)
use AJAX to change content when navigating inside your site