EDIT: Simplified the question:
I have a 100% width "seamless" iframe in which I embed another (local) page.
When accessing the page directly on Safari, the contents are properly zoomed out to fit the screen.
However when the website is in an iframe, the page loads zoomed in and I have to zoom out manually in order to see it in full width. Is there a workaround for this?
Iframe code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iFrame</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html, iframe
{
height: 100%;
margin: 0;
padding: 0;
}
iframe
{
width: 100%;
display: block;
}
</style>
</head>
<body>
<iframe src="index.html"></iframe>
</body>
</html>
Related
I'm trying to use the meta tag maximum-scale so the user can't enlarge the size of the viewport.
My code is down below. However, if I open this file with chorme, I can still use the mouse wheel to enlarge the viewport up to 500%, or reduce it down to 25%. How should I fix this problem?
Code:
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
/>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#container {
width: 100vw;
height: 100vh;
background: #f7f7f7;
}
#header {
width: 100%;
height: 60px;
background: #d1d1d1;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
</div>
</body>
</html>
from what I have understood reading this it works on devices that render pages in a virtual window or viewport like mobile screens, and your code works fine, I tried it in chrome dev tools setting the device to "Iphne XR" and emulating zooming by holding Shift + mouse click and drag across the viewport
I haven't been able to zoom in or out.
I have been having trouble fitting the navigation bar to the left, right and top of the screen. I haven't thought to much of it until now. I have simplified my code so none of the extra stuff is there.
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FallsTracker</title>
<link rel="stylesheet" href="save3.css">
</head>
<body>
<header class="navbar">
<a class="navbarname">FallsTracker</a>
</header>
</body>
</html>
CSS:
padding: 0;
}
.navbar {
width: 100%;
background-color: grey;
color: white;
}
Again, I want the navbar to fit to the left, right and top of the screen. I assumed this would work because I have padding at 0 for the body. I've tried having the padding at "none" as well but that didn't work either. I have followed tutorials for navigation bars and run into the same problem.
Here is a screenshot of what I see:
please add this to your style.css file
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
When I apply CSS media queries inside the iframe it is not affected. Below are my HTML files.
mainpage.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Sample Page</title>
<style>
#media screen and (max-width:767px) {
p{
color:lightblue;
}
}
</style>
</head>
<body style="background-color: MediumSeaGreen;">
<h1>My Sample Page Heading</h1>
<p>My first paragraph.</p>
<iframe src="iframe_sample.html" title="Sample IFrame to test" width="400px" height="500px"></iframe>
</body>
</html>
iframe_sample.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background: #fff;
}
#media screen and (max-width:767px) {
body {
background: red;
}
p{
color:lightblue;
}
}
</style>
</head>
<body>
<h1>My iFrame Heading</h1>
<p>My iFrame paragraph.</p>
</body>
</html>
Regardless of the screen size always iframe body background color is only red (which I set for mobile view). Also, the paragraph color inside the iframe also does not change according to the screen size.
I saw similar posts and added a viewport metatag also to the iframe. But cannot figure out what I am doing wrong.
Here are the screenshots.
use
iframe{
widht:100%;
}
in your parent html
Look at the documentation for width (which you are using with the max- prefix):
The width CSS media feature can be used to test the width of the viewport (or the page box, for paged media).
It describes the width of the viewport not the screen.
It is almost never useful to adjust content based on the screen size. People look at webpages in viewports that don't take up the entire screen almost all the time. You're explicitly creating a viewport smaller than the whole screen using the iframe!
You might want to consider device-width, but it is deprecated and (for the reasons I mentioned above) not very useful.
I have a long website that I am embedding on another website. The below code works great on desktop browsers, but does not work on tablet or mobile.
On iOS, it is impossible to scroll as I attempt to move up and down the page. On desktop, there is no issue.
Question: How can I correct the code below so that scrolling always works in any browser?
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body, embed {
width: 100%;
height: 100%;
margin: 0;
display: block;
}
</style>
</head>
<body>
<embed src="http://www.example.com">
</body>
</html>
I tried using the tag to include a scrollable webpage in another page. Same as your experience, the embedded page would scroll fine on desktop, but not on iOS. I switched to an iframe which does allow scrolling of the iframed content on both desktop and iOS:
<div style="overflow: auto; -webkit-overflow-scrolling: touch;height:450px;" id="my">
<iframe src="https://www.example.com" style="overflow: auto; -webkit-overflow-scrolling: touch; border: none;" scrolling="yes" width="100%" height="100%"> </iframe>
</div>
when zooming in and out my page Link of my page in Chrome browser the background is distorted and page looks like this Look of page after zooming in Chrome.
What can be changed in code to fix it for zooming in Chrome browser without distorting background graphic?
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Page Under Construction</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body {
background:#d7df29 url('1.jpg') center center no-repeat;
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
Thank you very much!
this line says, WE CANT HELP YOU YET...
background:#d7df29 url('1.jpg') center center no-repeat;
I just read you comment, you got an image, so it will be distoring with zoom in / zoom out...it would be better to go for CSS to avoid such distorting...