I am trying to use the orientation media query during print to change the way my data is displayed. This works in FF and Edge but not Chrome. If I enable emulation in dev tools and select 'print' then my code works. If I try to print though neither the print preview window nor the output change based on orientation.
I have tried locating the style in the html as well as externally.
This is my print.css file:
#media (orientation: portrait) {
pre {
font-size: 5px;
}
}
#media (orientation: landscape) {
pre {
font-size: 20px;
}
}
And this is my source file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="print.css" media="print" type="text/css">
</head>
<body>
<pre>1234567890</pre>
</body>
</html>
I would have expected it to display the <pre> text in a 20px font size when landscape layout is chosen during print and 5px font size when portrait is chosen. This is the way it works in FF and Edge when either viewing the print preview or actually printing (say to a PDF).
Related
When I put change the size using developer panel, by changing the size, it works fine, but if I decrease the size of browser directly there is no effect seen. Even when I make my dimension responsive from toggle device toolbar and then change it, it doesn't work at all.
I have just started learning css, this is simple code from w3school. kindly help.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
#media screen and (min-width: 480px) {
body {
background-color: white;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
Here is the image dimension responsive, media query doesn't work at all
You need a meta tag in the head. e.g
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Your code (without this) works as a SO snippet because in that case it's run in an iframe within a document which already has a meta tag at the top.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: pink;
}
#media screen and (min-width: 480px) {
body {
background-color: white;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
<script>
function getWidth() {
alert('Viewport width = ' + window.getComputedStyle(document.body).width);
}
window.onresize = getWidth;
</script>
</body>
Running this with the browser dev tools inspect facility gives, for example:
Take out the meta tag and you will see the vewport width is reported as the width of that area in the browser (980px in my test on Edge Windows10).
When I test a page in device mode in chrome (as well as Edge/Brave/Opera) the device-width property seems to be reduced, but the width property isn't
Recreate:
<html>
<style>
html {
background-color: #EEE;
}
#media (min-width: 750px) {
html {
background-color: #BADC55;
}
}
</style>
<h1>Hello World!</h1>
</html>
Making the window small works as expected:
Device mode doesn't:
then you have to ad this line to your code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I am having an issue with CSS media queries not working correctly on the "border-line" cases. Here is some sample code that was listed in another thread (CSS Media Queries not working in Firefox and Chrome) which demonstrates the problem. Internet Explorer and Edge both work correctly with this sample code.
At a screen width of 641px, the sample page displays:
Firefox: "Profile" Chrome: "Tablet Profile"
At a screen width of 991px, the sample page displays:
Firefox: "Profile" Chrome: "Profile"
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Device Profiles</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#media (min-width: 0) and (max-width: 640px) {
h1::before {content: 'Phone ';}
}
#media (min-width: 641px) and (max-width: 991px) {
h1::before {content: 'Tablet ';}
}
#media (min-width: 992px) {
h1::before {content: 'Desktop ';}
}
</style>
</head>
<body>
<h1>Profile</h1>
</body>
</html>
****Update****:
After further testing, the problem seems to be coming from the "Scale and Layout" setting under the Windows Display Settings. Windows has 125% as the recommended scaling value, and so that's what I had it set to. When I change this setting back to 100%, then the problem goes away.
For the benefit of anyone else having this issue, I finally found this issue documented:
https://github.com/twbs/bootstrap/issues/19197
This small HTML code represents my HTML5 page very clearly.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pebble Go</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
</head>
<body>
<style>
#media only screen and (orientation: portrait) {
html, body {
background: #222;
}
}
#media only screen and (orientation: landscape) {
html, body {
background: #000;
}
}
</style>
</body>
</html>
And so, on desktop browsers, Android tables and phones - it's working fine. But on iPad mini - it is not! … Result is - background is always gray. So my question is:
Why is this media query not working on iPad mini … ??? …
PS: I know that I have to use the max-device-width property as well, but I have a big reason not to do it! …
The requirement for this page is to be 100% wide and high, and I decided to:
Make the default CSS rules for landscape mode;
Define rules for different widths in landscape mode;
Define the portrait variants, relying basically on "orientation: portrait", and define different widths as well.
I did this! It's working! … Except the iPad mini !!! … And if I use max-device-width or something like this - then I'll be in a situation where I'll have to write different rules for landscape - different widths, portrait mode - different widths, and then mobile devices - landscape and portrait … !!! ….
The problem appeared to be caused by the clause in the meta tag for the viewport, and more specifically: "height=device-height". Removing it made everything work normal :) ...
I am working on a PC with screen resolution 1600x900.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Page title</title>
<style type="text/css">
#media screen and (max-device-width : 600px) {
body { background-color:#F00; }
}
</style>
</head>
<body></body>
</html>
The problem is that I am trying to develop a resposive version of the site and while developing I want to use Chrome on my PC. I was expecting that when I resize my browser to width less than 600px, the media queries will run, but it seems to think my device width is 1600px and it never changes. How to make it fire the media queries while I resize the window on my PC?
Remove "device" from #media screen and (max-device-width : 600px) { :http://jsfiddle.net/7rSzr/
Making it:
#media screen and (max-width : 600px) {
body { background-color:#F00; }
}
"I want to use Chrome on my PC"
You can change device-width in the settings of the Chrome Developer Tools. Refresh your page after that and admire the red background ;)