When I simulate with Google Chrome inspector choosing the Galaxy S5 (360px), I am having problems detecting the proper screen width. It omits the CSS for the 360px and uses the 768px CSS instead. Is there a better way around this?
#media only screen and (max-device-width: 360px)
{
.header_2{width:100%;height:auto;padding:20px;}
.left_obj{width:290px; position:relative;float:left;margin-bottom:20px;}
.right_obj{width:290px; position:relative;float:left;}
.mini_header{margin-bottom:20px;}
}
#media only screen and (max-device-width: 768px)
{
.header_2{width:100%;height:auto;padding:20px;}
.left_obj{width:370px; position:relative;float:left;margin-bottom:20px;}
.right_obj{width:370px; position:relative;float:left;}
.mini_header{margin-bottom:20px;}
}
Just change the order or reverse of your media query. Write first 768 media query then 360.
you can add meta to your header.
<meta name="viewport" content="width=device-width">
you can also refer to this link for full details
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
Related
Currently working for a client which ask to adapt interfaces on two different screen which have a resolution of 2560x1600.
The problem is that theses both screen have the same resolution but not the same screen diagonal. Indeed, one got a 27" diagonal and the other one... 9".
So it's pratically impossible to read elements on the 9", that's the reason why I need to adapt the elements on this specific screen.
Initially I was think about using DPR (device pixel ratio) which I supposed aren't not the same... But it's not. Both of theses have 1 DRP.
So I not able to use CSS media query rule.
#media (min-width: 2560px) and (-webkit-min-device-pixel-ratio: 2.5) { ... }
Anyone have an idea ?
Thanks
You can set the viewport to handle this.
<meta name="viewport" content="width=device-width, initial-scale=1">
There are various settings you can adjust such as min,max scale and device-height.
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
https://css-tricks.com/snippets/html/responsive-meta-tag/
When working with responsive html and css, don't bother with DPR.
#media (min-width: 2560px) { ... }
#media (min-width: 1980px) { ... }
You can use min-width for a mobile first responsive design or a max-width for a desktop first responsive design:
#media (max-width: 2560px) { ... }
#media (max-width: 1980px) { ... }
Recommended responsive steps are 1200px, 992px, 768px and 576px.
And of course you need the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1">
I tried setting two different styles for a website using #media. But it always loads the desktop view no matter if I use a phone or a computer.
/* desktop screen */
#media (min-width: 801px){
content desktop
}
/* mobile screen */
#media (max-width: 800px){
content mobile
}
What have I done wrong?
The actual answer to your question is: you're using width and device-width wrong. Change line #169 from:
#media (max-device-width: 800px){
to:
#media (max-width: 800px){
If you want to target phones specifically, it is a good idea to look at media queries used by popular frameworks such as bootstrap or foundation. You'll find that many target much smaller sizes such as 320px or 480px as opposed to 800px in your code.
The thing is CSS media queries distinguish features not devices. So you can try to figure out which features correspond to the device you want to refer to. In this site you have media queries for iPhones, iPads. So for example:
iPhone 6 in portrait & landscape:
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
These queries try to reduce the case to get to an specific device using its features. In this site you have a set of predefined queries for specific devices.
But notice that the difference between Desktop and Mobile might not be so obvious.
And don't forget to add meta in to <head></head>
<meta content="width=device-width" name="viewport" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
HTML head-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="maximum-scale=1">
CSS media query-
#media handheld, screen
and (min-width: 200px)
and (max-width: 399px){}
i don't know why you using handheld.. I just post my answer media query for mobile.
#media only screen and (min-width:300px) and (max-width :399px)
{
}
First, handheld is not supported by most mobile browsers, you can see more from this question: Do iPhone / Android browsers support CSS #media handheld?
Second, the breakpoint of your #media doesn't quite match any mobile screen size, here a website listing media queries for standard devices that your can check on: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I have media query in CSS:
#media only screen and (max-device-width: 480px) and (min-device-width: 320px)
When I open elements inspector in Google Chrome and select device iPhone 4, it shows different from the original iPhone 4s screen and some other phone screens.. Why? What do I do wrong?
How can I see the iPhone 4's original look of the page in my Google Chrome or other browsers? Is there any solutions?
How it looks on iPhone 4:
How it shows in Google Chrome, when I select device iPhone 4 (on the top left):
instead
(max-device-width: 480px) and (min-device-width: 320px)
use only
(max-width: 480px) and (min-width: 320px)
Why?
min/max-width
The width media feature describes the width of the rendering surface of
the output device (such as the width of the document window, or the
width of the page box on a printer).
min/max-device-width
Determines whether the output device is a grid device or a bitmap
device. If the device is grid-based (such as a TTY terminal or a
phone display with only one font), the value is 1. Otherwise it is
zero.
I fixed my problem by adding a <meta> viewport tag to <head>
<meta name="viewport" content="width=device-width,initial-scale=1">
Now I don't have to use (max-device-width: 480px) and (min-device-width: 320px)
(max-width: 480px) and (min-width: 320px) <- work fine for all devices
Anyway, thank you all for your response.
I want to add some style for the screen size between 1024px to 1280px, so I'm using following media query:
#media only screen and (min-width: 1024px) and (max-width: 1279px) {
My screen size is 1280px. The Firefox does not display any style added in the above query (and that's correct), but the Chrome browse on 1280px screen size displays the style added in the above media query.
Why Chrome on 1280px screen still displays the style added in the above media query? How can I fix the above query for Chrome too?
Thanks.
That is 6 years old but maybe help someone:
I was with this same problem, media queries working fine in edge and firefox but not in chrome.
The problem, in my case at least, was that I not put the viewport tag in head/html:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Now why the site was working in firefox/edge I don't know, actually make it harder to find the issue...
I'm really not sure why you're experience problems with your media query. Perhaps you're not styling it properly.
Obligatory JSFiddle here
body { background: red; }
#media only screen and (min-width: 1024px) and (max-width: 1279px) {
body { background: blue; }
}
I've tested it with Google Chrome on three different types of screen:
1. A width of less than 1024px
2. A width between the specified 1024px and 1279px
3. A width of more than 1279px