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.
Related
guys I am new to front end development and I am trying to learn from building a page.
Here is the demo.
https://codesandbox.io/s/goofy-boyd-xscgd
it looks fine on full-screen but when I narrow the viewport. The picture seems to be getting far away from the text and the gap between them are getting bigger as the picture shows.
The effect I wanted to achieve is that when I narrow the browser the picture would get closer to the text(and there would be overlap between them). When it is viewed on phone, the picture will become the background picture of the screen. like this
Can someone please help me with this?
Set the image element to
position: absolute;
right: 0;
in the CSS file. That should work.
Well, You can do this with CSS media query. Here is a sample, I hope you can tweak around and make it work for you.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="main">
<div id="txt">
<h1>Your Text</h1>
</div>
<div id="pic">
<img src="https://via.placeholder.com/500">
</div>
</div>
</body>
</html>
CSS
#main{
width:100%;
}
#txt{
width:50%;
display: inline-block;
}
#pic{
width:48%;
display: inline-block;
}
#media (max-width: 500px) {
#pic{
display: none;
}
#main{
background: url("https://via.placeholder.com/500");
background-size: cover;
}
#txt{
width:100%;
text-align: center;
}
}
Reduce your browser's size to smaller than 500px and refresh, you will see the change. If you want to do this in more dynamic way, you have to use javascript/jquery.
For example, consider the following case:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#media (min-width: 500px){
body {
background-color: red;
}
}
#media (max-width: 499px){
body {
background-color: blue;
}
}
</head>
<body>
Hi there!
</body>
</html>
After loading the page, if we were to change the width of the browser, after the width is less than 500px, the background of the page will change.
Question:
Does browser re-renders the whole page and the linked css files whenever we resize the browser ? If not, how is this dynamics structure preserved ?
I noticed something strange which seems to occur on iPhone Safari only:
If the content is not higher than the viewport its possible to scroll a little bit anyway. Its even possible to scroll a little bit on an empty page. (The height of the Safari topbar?)
Screenshots:
I dont see this issue on iPhone Portrait or iPad. I tried iOS 8 and 9 in Simulator.
I'm creating an webapp and don't want this to happen if the body is not higher than 100% of the viewport.
Try it out:
<html>
<head>
<style>
html, body {
overflow:hidden;
}
</style>
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
</head>
<body>
123
</body>
</html>
Updated Answer:
Best solution I found was to remove on-default move events. This does not remove the ability to have links and functions but prevent the page from being scrollable. You would then design your pages using #media to create custom css for landscape/portrait and various screen sizes. link for #media example in comments. You could then implement scrollbars through jquery or javascript. since IOS 8 minimal-ui for viewport meta has been removed and there is no simple way around the screen height issue for landscape.
document.ontouchmove = function(event){
event.preventDefault();
}
html, body {
overflow: hidden;
position: fixed;
}
<html>
<head>
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
</head>
<body>
123456
</body>
</html>
At some point I know I need to bite the bullet and do some serious reading on responsive and adaptive design, but I was hoping there was a really simple way to address this issue.
I have the following web page, shown here in my desktop browser.
And here is the same page on my cell phone.
Although it's probably hard to tell here, the banner is too small when viewed on my cell phone.
Ideally, I would like to have it so:
The width of the page content (and the corresponding width of my <footer> element, which has a top border) does not take up the entire width of the browser when it's full screen on the desktop, but does take up the entire width of my cell phone.
The banner would never be bigger than the pixel width of the image on my desktop, but would take up the entire width of my small cell phone.
Is there any simplified approach to this?
You can use media-queries to handle style changes based on the viewport. For instance, you can do something like:
JS Fiddle Example
/* Desktop Styles here*/
footer {
background: blue;
width: 500px;
}
.banner > img {
width: 300px;
}
/* When the screen is smaller than 560px, specify what properties you wan to change. */
#media only screen and (max-width: 560px) {
footer {
width: 100%;
}
.banner > img {
width: 100%;
}
}
Apart from media queries which you should seriously look into for serious responsiveness, you will also need to adjust the viewport meta tag in your header.
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to your <head> tag to instruct the phone browser not to attempt to display the page as in a zoomed-out state.
So, for instance:
...
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
<title>Hooray Banana</title>
<meta name="keywords" content="This page is a placeholder for future content.">
<meta name="description" content="sc web group">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
Then F12 and view in a phone emulation mode or check on your phone directly.
Just tried my hand at using media queries to make my site responsive.
I have a div that, on a normal size desktop browser is 50% of the total width of the viewport. When using mobile iOS, I want that to change to 100% of the width. That works currently with the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="initial-scale=1.0" />
<link href='style.css' rel='stylesheet' type='text/css'>
<link href="smalldevice.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="social">Content</div>
</body>
</html>
The regarding CSS for the normal page is:
#social {
position:relative;
margin-top:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
text-align:center;
width: 100%;
max-width:640px;
}
And the smalldevice.css is:
#media screen and (min-width: 640px) {
#social {
width:50%;
}
When resizing my browser window that works when I reach a viewport width of 640px, and it changes the width of #social to 100%. Testing on iOS mobile works too. But when changing to landscape mode (viewport width becomes 1136px, thus using the media query, it does not change the width of the #social element to 50%. On a desktop with a resizable window it does work. What's going wrong?
Edit: I set up a demo that seems to work when resizing the browser (I added a background-color so the div-width is visible) here: http://codepen.io/anon/pen/AtysL
#media screen and (min-width: 640px), (orientation: landscape)
Should work just fine.