I am using media queries in order to achieve responsive design. But I have found out that each browser behaves differently with it for example.
At resolution 480x856 chrome uses rules from #media screen and (max-width: 480px) but Firefox uses rules from #media screen and (max-width: 680px) is there a way to achieve same result in all browsers?
I find this post, maybe can help you.
"...It’s actually not a CSS or CSS interpretation problem at all–it’s the way Firefox does (or doesn’t) resize the viewport. Unlike Google Chrome, and most other browsers, Firefox allows it’s toolbars to affect viewport size. The only way to make the viewport resize below the width of your toolbars in Firefox is to disable them. You’ll need to go to View > Toolbars and uncheck each. Then try resizing and watch your media queries take effect."
https://css-tricks.com/forums/topic/firefox-ignoring-max-width320px-media-query/
Related
We are looking for a way to create a div class to only appear on mobile, ie. when the resolution is below 1024x768. We currently use:
hide-below-768
for resolutions above 768.
Would anyone be able to advise on setting for below?
Thanks in advance.
You're looking for media queries
#media screen and (max-width: 768px){
/* add css here */
}
This allows you to apply different class behaviours, wrapping and sizing rules depending on the browser view port size.
But this won't be just for mobiles. It's also works when reducing the width of the browser window on desktop browser.
It's part of a technique called responsive design.
http://www.w3schools.com/css/css_rwd_intro.asp
I've seen other questions, but no answer has helped me yet.
I have set a media query to:
#media only screen and (max-device-width: 767px) {
/* css here */
}
which I want to make the page on phones render the same in both landscape and portrait.
on my 2 available iphone 5's - a 5 and a 5c, portrait works great, landscape totally ignores it.
i've tried the specific landscape orientation tags, and that also fails.
i've also tried setting the max width to 1500px just in case of some retina thing - and that also fails in landscape.
i've run the css through lint - and that didn't find anything all that bad, even. so i think the css is ok (if not lint-perfect).
the site is locked for now till i hear back from my client - so posting a link won't help. But has anyone else seen this issue, and is there any fix out there? When i get back home tomorrow i can try an old Android phone and see what that does. But for now it's driving me crazy!
Do you have to use max-device-width? because if you change it to use max-width you will keep all the styles up to that size.
The difference between them two is max-device-width if you view the site on a browser and shrink it down it doesn't become responsive but if you use max-width it gives the site a responsive feel when shrinking the browser.
#media all and (max-width: 767px) {
css in here
}
I prefer using max-width.
The only case I can think of we should use max-device-width rather than max-width is when we need to keep something consistent even when browser window has been re-sized.
I'm creating a landing page and I need it to have slightly different height in IE for desktop and modern IE (in Windows 8.1). Can I do that with media queries? I tried binging and googling but couldn't find anything.
Thanks!
Short answer: no.
Media queries will help you if you need to respond to the viewport size. For example
#media screen and (min-height: 900px) {
/* rules for tall viewports */
}
While you can be sure that IE metro/modern will be the full height of the display, you can't necessarily differentiate that from IE desktop in full-screen mode (i.e. F11), and of course your page may be viewed from a variety of devices with different display dimensions (including rotatable devices in portrait or landscape orientation).
I'm currently making a webpage and testing it in chrome works fine, but in Firefox - it is zoomed in.
This is because my DPI in Windows is set to 125%, and Firefox detects this, and adjusts every webpage accordingly.
However, my webpage is not meant to be viewed at such a zoom level, the images aren't made to be displayed that big, and hence it looked blurred/pixelated. The general layout of the page is messed up too, because everything is so big.
Now, this doesn't affect most people - as their DPI would be at 100% in Windows. However, I want it to be the same on all browsers.
I've searched and have found solutions as for the user to disable this "feature" - but I want to be able to disable it from my website - so it doesn't look wrong to the user in the first place.
e.g. one post says:
1) Type about:config in address bar
2) search for layout.css.devPixelsPerPx
3) change value of layout.css.devPixelsPerPx from -1.0 to 1.0
But that isn't what I'm looking for.
Is there any way to disable this from CSS/HTML/anything?
Thanks.
You could easily let your website address users with settings at higher zoom levels by including a media query like:
#media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
only screen and( -o-min-device-pixel-ratio: 5/4 ),
only screen and( min-resolution: 120dpi ),
only screen and( min-resolution: 1.25dppx ) {
body {
font-size: 1rem;
}
}
See this article for an extended explanation and why the cleaned up solution of the media query is sufficient for a broad browser support: IE9+, Fx3.5+, Opera9.5+, Webkit Browsers Chrome and Safari, both Desktop and Mobile.
Your could try something like this below. There are some caveats using this, but for some situations
it is worth using it.
#media screen and (min-resolution: 120dpi) {
/*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/
body {transform: scale(0.8);transform-origin:top left;width: 125%;height: 125%;}
}
Commented /*body....*/ example scale may be easier to understand yet worse, f.e. because
scaling should be done based on transform-origin css rule top left edge. Then things can be rendered better especially in Chrome.
if you use width: 125%, your RWD css should react differently to changing browser sizes on account of this from what you expected when screen ratio was 100%.
And you might reasonably accept this - this is RWD and the difference is 25%. But some people might want to adapt their css like this:
#media screen and (min-width: 1000px)
you also need to adjust:
#media screen and (min-width: 800px)
probably not 1250px but 800px like I did.
Edge, Chrome, FF do pretty good. IE 11 rendered the worst yet not hopelessly.
There are some problems in FF (not edge, chrome) when expanding select fields - solution css select.
Some borders can can be visible some dissapear on FF (maybe not edge, chrome)
There can be some issues not mentioned here like when you use carousel like owlcarousel on your page.
Yet I think it is greater probability to save more time with this example tested still too little.
You have to use exact scaling like 0.8 for 125% screen for your images to be rendered as sharp as possible.
I noticed that when switching to different dpi resolutions using ctrl +/i in a desktop browser and for sure using multitouch gestures in mobile browsers, a browser changes dpi too, so any solution using #media min/max-resolution may not work as expected. What is needed in css is to read system resolution not a browser. However as i see this resolution change doesn't take place like then when someone changes browser size manually or by rotating a mobile device.
Thank you Tatsuyuki Ishi for correcting some errors of my answer.
This frustrated me too, but luckily there is a solution.
Navigate to about:config. (Click accept on any warnings telling you to be careful with advanced features)
Search for layout.css.devPixelsPerPx and change its value to 1.0 and your issue should be fixed.
It was something implemented in Firefox 22.
I did this way, zoom works better than transform, it doesn't make fixed elements absolute:
#media screen and (min-resolution: 120dpi) {
body {zoom: 0.8;}
}
Set it to 1.25: that keeps the user interface larger, but resets the website to 100% pixel mapping.
I am aware of the CSS 3 units vw, vh and vm, which seem to be useful for making elements that have their box sizes and text sizes relative to the browser's viewport size. However, sadly, these are not well-supported with the current major browsers; only Internet Explorer 9+ does.
What other methods can I use to do things like CSS font-size properties that scale with the viewport? I would like to avoid JavaScript and/or jQuery solutions if possible.
Doing a 100% scalable website is possible. As Rev said, you can do this by using percentage values, but it is tricky.
The better option is to utilize #media queries. These allow you to apply CSS rules to a page only under certain conditions. By using media queries to detect the device width and/or the page width, you can apply fine tune control over how your site looks AT different viewport sizes. For instance:
#media screen and (max-device-width: 960px) {
font-size:14px;
}
#media screen and (max-device-width: 480px) {
font-size:13px;
}
Now, the above example is rather trivial and contrived. For a deeper understanding of what you can accomplish with media queries, I recommend you view the W3C spec page. Some of the most powerful are the width, min-device-width, max-device-width, portrait|landscape, and print queries.
As a side note, make sure to include these styles at the bottom of your CSS, so that they dont get overwritten by default styles.