Extremely basic media query not working on mobile - html

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">

Related

Firefox scaling issues causes pixelated / blurry borders

github repo with shortest code replicating problem
Basically i have a webpage that i have scaled down using the "viewport" meta tag.
<meta name="viewport" content="width=device-width, initial-scale=0.25">
The issue is that Firefox renders ALL my curved borders really blurry.
If an element has the following CSS applied while being viewed from a Bugzilla mobile browser, the resulting borders are really blurry/pixelated.
.element {
font-size: 40px;
text-align: center;
border: 4px solid black;
border-radius: 40px;
}
#media screen {
.element {
font-size: 4vw;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.25">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="element">
Lorem Ipsum
</div>
</body>
</html>
Screenshot of webpage in Chrome (devtools Mobile browser):
Screenshot of webpage in Firefox (devtools Mobile browser):
From what i've found online it seems Firefox has a long history of scaling based rendering bugs but this is the first time ive seen issues with curved borders.
I think this is what that is related to background bleed and you may probably find its reason in this discussion https://bugzilla.mozilla.org/show_bug.cgi?id=921341
To answer your question which has already been asked in this thread div border radius problem (on firefox and opera)
I recommend you using these properties in your css regarding with the mentioned answer
-moz-background-clip
-webkit-background-clip
background-clip

How to fix media queries in css?

I need to create desktop and mobile versions of the site. I decided to use media queries in CSS. But when I coded them, I found out that they aren't working and I don't know how to fix them. To fix this issue I went to Youtube where found this example, but I implemented that I found that the media query doesn't work. Then I went to stack and found a similar problem. In that case, it was fixed by adding a meta tag in the head. I did that, but it didn't help me. It wasn't work in chrome and Mozilla.
body{
color:red;
}
#media screen and (max-width: 600){
body{
color: blue;
}
}
<!DOCTYPE html>
<html>
<head>
<title>The car dealer site</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>Title</h1><br>
<h2>Subtitle</h2>
</body>
</html>
You need to specify the units for your max-width property. Change the line
#media screen and (max-width: 600){
to
#media screen and (max-width: 600px){
And try it again

#media not working on phone but does on desktop

I created my website and want to make it mobile friendly.
So I created a media query and started working with it. Checking while scaling my browser window.
If I check the same page on a phone it doesn't change the layout.
I can't see what I'm missing.
Here is what I have:
HTML:
<div>
<p>
<h2>Title</h2>
</p>
</div>
CSS:
#media (max-width: 768px) {
h2{
font-size:2.5vw !important;
}
}
h2{
font-size:1.5vw;
}
Hope I missed just a small thing :-)
M.
Sounds like you need to tell the device to use its actual pixel width:
<meta name="viewport" content="width=device-width, initial-scale=1">
Some devices will render pages assuming they are not optimized for mobile. Put that meta tag in your <head> tags and let us know if that fixes it. More info here.
Try adding this into your code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Try this
#media only screen and (max-width:768px) { ... }
OR
#media only screen and (min-width:320px) { ... }

How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?

Question
I know there are a lot of questions on Stack Overflow about the meta viewport tag, but I can't find anyone asking what seems to be the most obvious and useful question:
How can I use meta viewport and CSS media queries to make the average 960px website design look good on the iPad (and desktop), while still retaining a smaller viewport and site design (e.g., 320px) for the iPhone and other mobile phones?
For the iPhone, I think it goes without saying: a smaller, phone-friendly site (e.g., 320px wide) is ideal. But for the iPad's larger screen, a special mobile site isn't really necessary; using the normal 960px site design seems appropriate. A 320px site looks clownish on the iPad, and I don't always want to design a third variation for the iPad's 768px.
Here's the problem: I can't figure out how to use the meta viewport tag and CSS media queries to achieve both 1) a normal site on the iPad, and 2) a mobile site on the iPhone. I realize it's possible with JavaScript hacks (e.g., dynamically changing the meta viewport tag according to the device), but I don't want to use JavaScript; I don't think JS should be required to achieve basic usability on a simple website with static content.
1) If I remove the meta viewport tag altogether, my normal 960px site looks perfect on the iPad, but bad on the iPhone (large empty margin on the right side):
2) On the other hand, if I use <meta name="viewport" content="width=device-width" />, then the site looks great on the iPhone, but bad on the iPad (zoomed to 768px, site spills outside of the viewport):
This seems like it should be the simplest thing in the world, but I haven't been able to solve it. What am I missing?
Markup/CSS
CSS:
<style type="text/css">
body { margin: 0; }
.mobile { width: 320px; background: #fdd; display: none; }
.desktop { width: 960px; background: #ddf; }
</style>
<style type="text/css" media="screen and (max-device-width: 480px)">
.mobile { display: block; }
.desktop { display: none; }
</style>
Markup:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="mobile">Phone (320px)</div>
<div class="desktop">Desktop and tablet (960px)</div>
</body>
</html>
Combine a media query with zoom.
#media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
html {zoom:0.8;}
}
Try adding maximum-scale to your meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
You could use JS to rip out the meta viewport tags like Cole discusses here - http://cole007.net/blog/136/responsiveish-viewport-hack there's also another option in the comments
I use Serban Ghita's php Mobile Detection method:
https://github.com/serbanghita/Mobile-Detect
...then this php in the head tag:
<?php
if ($detect->isMobile() && !$detect->isTablet()) {?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0">
<?php } ?>
Works great.

100% height div isnt working in Chrome when i print it

I want to write a div for every print page. So i did height of div 100%. Normally in every browser it is working well. But when i print this page it is not working in Chrome.
<!DOCTYPE HTL>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<title>Brove.NET ISO Yazılımı</title>
<style>
html,body{
padding:0;
margin:0;
height:100%;
width:100%;
}
.sayfa{
height: 100%;
width: 768px;
}
</style>
</head>
<body>
<div class="sayfa" style="background-color:#666666">fds</div>
<div class="sayfa" style="background-color:#cccccc">fds</div>
<div class="sayfa" style="background-color:#aaaaaa">fds</div>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
</body>
</html>
This is solution, man...
Try this code that is
#media print and (-webkit-min-device-pixel-ratio:0) {
.sayfa{
height: 1101px;
width: 768px;
}
}
This CSS/Chrome issue has been gone over here:
height 100% in chrome
Hope this helps.
Set the width and height of your html and body elements to 100%:
<style>
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
</style>
I can't find any documentation on this bug, but it's definitely a bug, no doubt about it.
Your code will execute perfectly in non-Webkit browsers (I'm assuming Safari does the same thing) and shows up fine on the screen, then goes into a magic can of fail upon clicking print, right? What's a guy to do?
Answer, give the HTML and BODY tags a defined height in an "actual" measurement, not percents:
html, body {
margin: 0;
padding: 0;
/* etc */
height: 880px;
}
div.sayfa {
height: 33%;
}
The pages print the same from Firefox 14 and Chrome 19+ using the styles above.
My experiments yielded a printed-page height of 880 pixels for the printer we were using, your mileage will probably vary. EMs work, too, but that caused too many headaches, so I figure a definitive pixel value would work best.
It's a messy workaround, but at least it actually works.