I have a container page which loads an iframe, which is set to 99% width and height. The content of the iframe is responsive, using media queries. The container page happens to also be responsive, using media queries, but I don't think that's particularly important here.
This works fine on modern browsers, and on iPhone 6, but it doesn't work on iPhone 5. The 5 is entirely ignoring the media queries.
You can test this using Chrome's iPhone 5 emulator and the problem is immediately visible. Using the sample code below, the paragraph should have a border color #f00, but instead it remains #ccc. I also verified on a real iPhone 5 and it matched Chrome's emulation.
Note that if you load the iframe content in a separate page, the media queries work just fine on iPhone 5 - the problem only occurs when loaded inside an iframe.
Has anyone found a way to make this work? Am I going to need some kind of javascript hack?
Container Source Code (container.htm):
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe src="iframeContent.htm" style="border: none; height: 99%; width: 99%; margin: 0px; padding: 0px;"></iframe>
</body>
</html>
Iframe Source Code (iframeContent.htm):
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
p { border: 1px solid #ccc; }
#media screen and (min-width: 310px) {
p { border: 1px solid #f00; }
}
#media screen and (min-width: 350px) {
p { border: 1px solid #00f; }
}
</style>
</head>
<body>
<p>here is a paragraph of content.</p>
</body>
</html>
Arg, the problem had nothing to do with the media queries not being supported via iframe, or with iPhone 5.
With the iframe being 99% width, and the default 8px margin on the body element, the content inside the iframe thought that the screen was only 301px wide, which was too small to be covered by the 310px width media query, and there were no other rules that caught it.
I fixed it by making the base media query 200px.
#media screen and (min-width: 200px) {
p { border: 1px solid #f00; }
}
Related
This has me stumped. This works fine in browsers (tested Chrome, Firefox, and Safari), but doesn't work in Chrome emulator, Chrome mobile, or Firefox mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta title="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 50%;
float: left;
}
#media screen and (max-width: 500px) {
div {
width: 100%;
}
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
</body>
</html>
My original problem was more complex, but even boiling it down to the simplest form it's not working. Tried the above with different combinations such as display: inline-block; instead of float: left;, different viewport meta tags, adding only screen to the media query, other tags than plain divs, etc.
My original problem surfaced when doing work with Web Components + ShadowDOM, but it doesn't seem to be related to those. Made sure to bust all my caches while testing.
Am I going nuts?
Oh wow I'm dumb. Had a typo in the meta tag. Should be name instead of title:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I'm interested in how youtube changes it's appearance based on the screen size without using javascript.
Try it yourself:
go to youtube and take a look at the navbar if the window size is smaller than 700px the logo changes.
This works even with javascript disabled.
I inspected the resources of the html css files of the page but couldn't find out how youtube does it.
If anyone knows the trick or has a guess - please answer.
They use mediaqueries a CSS3 function that is related to Responsive Design, this allow you to define in which size (known as breakpoints) the browser should render the website with a different set of CSS properties.
If you have a website with the following css stylesheet
body {
background: black;
}
#media (max-width: 600px) {
body {
background: gold;
}
}
Explanation: when the browser or screen width is over 600px, the body background should be black. In case the browser or screen is under 600px width, the body background should be gold.
body {
background: black;
}
h1 {
color: white;
}
#media (max-width: 600px) {
body {
background: gold;
}
h1 {
color: red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>Demonstration</h1>
</body>
</html>
:) Cheers.
they use the Responsive Web Design (Media Queries) :
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
I am working on making a theme mobile responsive. You can view it here, http://107.170.168.111/
When viewing on desktop and resizing the browser, it works fine. However, on actual mobile devices it doesn't seem to be working correctly (the sidebar should be hidden and a mobile nav should appear). It works on single post views such as: http://107.170.168.111/2015/04/27/szechuan-green-beans/#more-9327
but not on the actual index. I can't seem to figure out why.
My media queries, of course, are at the end of my CSS document:
#media screen and (max-width: 640px){
.hide-for-small{
display: none !important;
}
.show-for-small{
display: block !important;
}
.sidebar-container{
display: none !important;
}
#sidebar{
display: none !important;
}
.wrapper{
width: 100%;
}
#content{
position: relative;
display: block;
margin: 0;
width: 100%;
padding: 110px 0 0;
}
}
and in my <head> i have <meta name="viewport" content="width=device-width, initial-scale=1">
I'm pretty stumped, any suggestions? Thanks!
Update:
meta viewport is located in header.php - which is included on index.php, but for some reason is not being displayed. The same code is used on single.php which works.
Header.php -> https://gist.github.com/buschschwick/a7f67176e748c08e314a
Single.php -> https://gist.github.com/buschschwick/d3e2bdff07fffcb4b01a
Index.php -> https://gist.github.com/buschschwick/56576b2294b160271a3a
Solved:
A disabled caching plugin was still serving the old version of index.php that did not include the meta viewport. Thanks everyone.
Change your #media from "screen" to "all". You are targeting all devices not only screens:
#media all and (max-width: 640px){
// your css
}
EDIT:
When you view your source code, you cant find any meta tag for "viewport". I used your code and added viewport in my editor and it worked just fine:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Problem: the index page does not have meta viewport. You need to add that in index page.
I'm working on a small project for school, where we have to incorporate html5 and css3. It's just in the begin stage now, as I'm trying to create two separate css-files for a mobile and a desktop version.
For the mobile version, I'm trying to get the menu to just show as a list, but with a bigger font. I can in no way get this working though.
This is the css for the menu:
nav ul {
list-style: none;
background-color: green;
padding: 0;
}
nav li {
border-bottom: 1px solid black;
padding: 5px;
}
nav {
margin-top: -36px;
width: 100%
}
nav h1{
margin: 0;
}
This creates the following on my desktop
And on my iPhone
The font-size is set to 1em in the HTML in the top of the file. But 1em is not big enough for mobile devices, so I want it bigger, which seems impossible.
Even when I give the nav h1 a font-size of 10em, it doesn't get bigger than this:
While on my desktop it does work without a problem, there it looks like this:
The same problem occurs when trying to make the "blog posts" bigger, they just won't do it.
I normally have no trouble working with CSS, but this time I can't figure it out. Hope anyone can help! I have the feeling it's something very obvious.
Here is the complete CSS: http://snipt.org/zLic5
Here is the html: http://snipt.org/zLid2
i saw your html code. you are not adding any meta tag. certain meta tags are required, when you are developing mobile website,
for example you have to add -
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<title>Welcome to your school name</title>
<!-- smart phone css -->
<link href="assets/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />
<!-- Tablet -->
<link href="assets/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" />
<!-- Desktop -->
<link href="assets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)">
I see a couple things I think can help your situation. Semantically, you don't want to use <h1> tags in your menu list at all. Remove those tags and apply the styling to the nav li css style and adjust the padding accordingly. Also, just a recommendation, but I've heard from a few websites that the ideal mobile font sizing is pt.
I hope this helps.
Go back to using the li for you navigation.
Then set the font-size to something acceptable (14px or 16px).
Then, in your css, use media-queries.
#media (max-width: 480px) { // will only happen on viewport less then 480 pixels (mobile)
li {
font-size:18px; // larger font (or whatever you want to do
padding: 20px; // can even increase your padding
}
}
Try css property text-size-adjust to scale text on mobile devices. Something like:
nav {
text-size-adjust: 200%;
}
nav ul {
text-size-adjust: 300%;
}
nav h1 {
text-size-adjust: 400%;
}
I am building an reponsive-website, having 3 sizes. Max 480px, max 768px and max 1024px+;
However, I have a problem when using the iPad. On a Galaxy Tab 10.1 it works like a charm, in my browser it works also good.. but it seems that whenever I use the iPad it always seems think the max-width is 768px.
This is what I mean:
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<style type="text/css">
body {
background-color: red;
}
#media screen and (max-width: 480px) {
body {
background-color: green;
}
}
#media screen and (min-width: 481px) and (max-width: 1023px) {
body {
background-color: brown;
}
}
#media screen and (min-width: 1023px) {
body {
background-color: blue;
}
}
</style>
<body>
<div class="color">
Some color
</div>
</body>
</html>
Although my requirements do not include iPad support, I do want to support it.
This has probably to do with max-scale, min-scale and initial-scale - try setting all of these to 1 and see if anything changes.
The downside is that iOS users won't be able to pinch to zoom in your page.
When you rotate the iPad it doesn't change the viewport, rather it scales the content. There is a good explanation from Allen Pike.