I have a web page that is using media queries to target print media.
Like this:
#media print {
#user_profile h1 {
font-size: 16px;
margin-top: 10px;
}
}
When I try to print the page from the iPad, via AirPrint, the print styles are not applied.
Is #media print not supported by mobile safari?
If the other styles are without media query for screen, I think it will apply to print also.
Try adding to normal css a media query for screen,
Try to place all print css at the bottom to overwrite normal css.
#media print is supported since iOS 1.0.
However, Mobile Safari does aggressive caching of assets and it's possible that your modified style sheet is not fetched from the server. You may append a query string (e.g. styles.css?v=1) to make sure the file is reloaded.
Related
I have a code for a bootstrap carousel I am deploying to a site. It works perfect on large devices but I wanted to add media queries to optimize it for mobile.
However, whenever I add a media query to the style sheet I get a runtime error and the site breaks.
I am using Umbraco and this the carousel is a partial view. When I add in even a blank query such as
#media screen and (max-width:480px) {
body {
color: red;
}
}
I get the runtime error, what could be problem?
Thank you
Since your CSS is within a tag in your view and you're using #media, you must escape the #, by adding an additional #. So change your code to
##media screen and (max-width:480px)
When using # the compiler thinks you're writing Razor code and it simply errors because it can't figure out what #media is supposed to be, since there's no variable defined with its name. I hope that makes sense.
If you change it to this does it work?
##media screen and (max-width:480px) {
body {
color: red;
}
}
I have created a website and added this line of code for starting media queries:
#media only screen and (max-device-width: 768px) {
.title {
font-size:32px;
line-height:30px;
}
}
But whenever I make a change on media queries, it's also changing the code in the original CSS file. How can i avoid this process. Because I don't want to change anything on desktop view. I only want to make changes on that #media screen. Please help.
There is a change in media query try with my code,
Try my code in codepen
I have a page which uses non-external CSS in the <style> tags, and in those <style> tags is the following media query:
#media screen and (max-width:768px){
/* CSS */
}
All is working fine in Firefox, the CSS for 768px width and under only renders when it should. However, in IE9, the CSS inside this media query is rendered on load no matter what the size is.
After it loads however, if I change the browser size at all, it rerenders as the desktop version, as it should. So basically, IE9 non-external stylesheet seems to be rendering all CSS, whether it's in a media query for which it doesn't match or not, but then rendering the correct CSS if the browser is resized, even by a pixel.
Does anyone know what exactly is going on with this, or if there's a quick fix? The only solutions I've been able to think of would be working around the issue by reordering my CSS, and adding a new media query, which I'd like to avoid for the ease of updating code.
I had a similar problem with an external css file in ie10.
I sort of fixed it by giving the query a minimum of 1px (0px doesn't seem to work).
It doesn't solve all my problems, but it may be enough for yours.
#media screen and (min-width: 1px) and (max-width:768px){
/* CSS */
}
I came across a similar issue that was happening in IE 10. Setting a min for the media query did not help fix this particular issue. I used a bit of js to resize the window to the exact same size and it fixed the issue that IE was having. It feels a little dirty, but it works.
$(document).ready(function() {
var w = window.outerWidth;
var h = window.outerHeight;
window.resizeTo(w, h);
});
I had similar issue while using external css with media query. solved by loading css after html code.
You can target IE9 only with this fix:
/* IE9 */
#media all and (min-width:0\0) and (min-resolution:.001dpcm) {
body {
background: blue;
}
}
I'm trying to just flat out kill my responsive Web Design and CSS3 Media Queries for all IE browsers below 8, and just have the fixed, locked, layout.
I've tried, inserting 'if IE 8+ conditionals' around my media queries within my css and it was ignored. Anyone have any simple concrete methods aside from calling in a new seperate stylesheet?
How about doing feature detection with Modernizr. http://www.modernizr.com/
I would suggest combining more CSS with the rules inside the media query to shut out IE8 and below. For example (where the class "nevergonnahappen" isn't used on anything)
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.example:not(.nevergonnahappen) {
color: red;
}
}
IE8 and below will ignore the media query and execute the code, but since IE8 and below don't support ":not" the rule will not match anything and so won't be executed. Modern browsers will understand ":not", but since nothing actually has a class of "nevergonnahappen" nothing is excluded.
If you're using Modernizr you could use a feature detection class to exclude IE8 instead of the not sudoclass.
.touch .example {...}
instead of
.example:not(.nevergonnahappen) {...}
where the ".touch" class is put in for touch-screen devices.
Here are hacks discovered after you posted your question, to target specific IE versions as fallback: http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/
And a way here, to apparently filter for IE6/7 like this, with the IE8 ignore caveat:
#media screen and (min-width:640px), screen/9 {
body {
background: green;
}
}
"This allows all non-IE browsers to render the styles and keeps media
query support in IE9/10. It also creates a pass-through filter for
IE6/7 but we’re still stuck with IE8 ignoring the entire block".
http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/#comment-3393 by Keith Clark
Is there some means of specifying the default media type for a browser (let's say chrome), so that I can test css #media styles?
#screen
{
div { background-color:red; }
}
#handheld
{
div { background-color:lime; }
}
<div style="width:100px;height:100px"></div>
Such that I could (without touching my code) test the two media types in the browser? Changing the media type would change the color of the div above. A chrome extension, a bit of javascript or some other magic would be greatly appreciated.
Could this be what you're looking for?
Web Developer extension for Chrome
The web developer extension has a feature called "Display CSS By Media Type". If this doesn't help you, you could always make one stylesheet per media type and use the import css statement to specify which type to load:
#import url("handhelds.css") screen;
Ilya on Stackoverflow wrote this answer, I found it easy and useful:
There's a simple way to test handheld css with with media queries:
#media handheld, screen and (max-width: 500px) { /* your css */ }
After that you can test on browsers that implement media queries by resizing the window to less than 500px.
That's all!