I am making one project to react js and CSS. For making it responsive I am using the media query.
But after adding all the CSS and media query the media query is not working in the safari browser of phone and pc. Please, anyone, help me or suggest me how can I fix this issue.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
A few years ago I made a website where I used CSS media queries to format for mobile. Today, in working on updating the site, it seems as if any changes I'm making to the mobile queries aren't responding.
HTML is set up like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
CSS Media Queries are set up like this (for portrait and landscape orientations):
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2)
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2)
The code I previously wrote still works, but any new changes don't show up. Anyone know why this is happening?
Also, full website is here: https://estherloui.se/
Try using min-width instead of min-device-width same for height
I am new to media queries and I have the following problem. I need to fit this easy layout (www.spiaggiati.it/antani/) for smartphones and tablets in particular (desktop are not so important for this application).
I've tried with this in the order you see (you can check screen.css sheet on my website):
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) (for smarthpones)
#media only screen and (min-width : 321px) (for smartphone landscape)
#media only screen and (max-width : 320px) (for smartphone portrait)
#media only screen and (min-width: 768px) (for tablet and desktop)
The problem is if I edit the last part (tablet and desktop) also the layout on my smartphone changes. Probably I am not catching how media queries work...
I do not need very complicated functionalities, as you can see the layout is very simple and I need to adjust only some height, width and font-size.
Can you help me?
Thank you in advance for your cooperation.
Please add following meta tag :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For media query details you can more info from http://stephen.io/mediaqueries/ for all iOS devices. If you have any other query let me know. Even you can get better idea from here http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
I have the following media query, to select iPad retina and smaller displays.
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape),
only screen and (-webkit-min-device-pixel-ratio : 1.5) and (orientation : landscape),
only screen and (max-width : 1080px){
}
The problem I have is, on Macbook Pro retina's the styles are also picked up.
I don't have a retina to test on, so I'm having trouble debugging.
Can anyone see the conflicting rule?
You should use simplest media query. Here the link i use for apple's device : http://stephen.io/mediaqueries/
Anyone know how to target the Samsung Galaxy S3 with media queries?
Currently I use:
iPad
<link rel="stylesheet" media="all and (device-width: 768px)" href="css/device-768.css"/>
Other tablet devices
<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/>
Phones (S3 didnt use this - dont know why)
<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)" href="css/phones.css"/>
I also tested
<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="css/phones.css"/>
but it didnt work...
I have set up a page that shows you how any device will react to media queries by giving the values of the media features. Just visit the page with the device you want to test:
http://pieroxy.net/blog/pages/css-media-queries/test-features.html
From there, you can decide which media query you want to use based on what the different devices report. Remember it is generally a bad idea to target specific devices. You should rather target display sizes and density to make your website adapt to the surface at hand.
At this time, mobile devices have improved so much that their screen resolutions are similar and sometimes even better than desktop screens resolutions.
For example Galaxy S4 of Samsung has 1080X1920 pixels - Full HD screen!
But in responsive design we check resolution and need to fit according the resolution and if you try to add media query, let's say min-width of 1000px and check it on the Samsung Galaxy S4 you will see that nothing happened.
The reason for it is that mobile high density screen have two aspect of pixels.
Real resolution
The first resolution is the factory real resolution, it's mostly for videos and images. on Samsung galaxy S4 the real resolution is 1080X1920.
CSS resolution
The second resolution is for the browser. and for us developers that means we need to act different and not according the real screen resolution. in Samsung Galaxy S4, CSS resolution is 360X640.
Samsung Galaxy S4 resolution:
Real resolution: 1080X1920
CSS resolution: 360X640
How to acquire CSS resolution? In Wikipedia you have all mobile devices resolution table (tablet and mobile devices). http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
/*(ldpi) Android*/
#media only screen and (-webkit-device-pixel-ratio:.75){
/*CSS */
}
/*(mdpi) Android*/
#media only screen and (min-device-width : 480px) and (max-device-width : 800px) {
/*CSS */
}
/*(hdpi) Android*/
#media only screen and (-webkit-device-pixel-ratio:1.5){
/*CSS */
}
I used this to target just the portrait view on the s3:
#media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) {
}
Like mentioned before. Use this Media Query detector on your handset and also consider using a better fluid design - CSS hacks are not good - you should not really need them in 90% of scenarios if you have a good fluid design.
Samsung Galaxy S3
#media only screen and (max-device-width: 720px) and (orientation:portrait) {
.your-css{}
}
#media only screen and (max-device-width: 1280px) and (orientation:landscape) {
.your-css{}
}
Samsung Galaxy S I & II: 320 x 533, in portrait mode (CSS pixel density is 1.5)
Samsung Galaxy S III: 360 x 640, in portrait mode
On my Samsung S3 with Android 4.1.2, while I tried all the media query features (max-height, width, device height and width and even color:8) only this worked for me in addition to the second answer above in this page:
Samsung S3 default browser
/* Samsung S3 default browser portrait*/
#media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) {
body { background:yellow;}
}
/* Samsung S3 default browser landscape */
#media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape) {
body { background:#000;}
}
Here is a screenshot for the pieroxy media query diagnostic tool test. Please note that both work without orientation but don't change the propriety without load/refresh.
Hope this helps with no conflict with any other queries you might use
I think this would safely apply to most phones of today (HTCs, iPhones, Samsung), while avoiding the common tablet widths (iPad iPad 3/4 iOS 6 has 672px on portrait).
<link rel='stylesheet' href='/Styles/device_phone.css' media='screen and (max-width: 640px)'/>
This phone would be the odd fish:
Samsung Nexus S Android 2.3.6 Stock Browser which has
width: 480px, height: 800px (max-width 800)
It is generally not recommended to target specific devices, but if you really wanted to target the odd fish you could, since it has other unique attributes. I personally prefer using max-width as I can test direct on my desktop and wide screen, and I'm not fussed for users seeing the mobile view if they really did resize their browser to less than 640 wide.
Reference:
http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html
This is tested and worked.
#media only screen and
(device-width: 720px) and
(device-height: 1280px) and
(-webkit-min-device-pixel-ratio: 2)
Forget all this "max-device-width" "min-height", etc, quackery!The problem is you guys are not designing for the dimensions of the device. Also, the Galaxy S3 according to Samsung has a pixel density of 2, meaning that the physical screen maps out 1 device pixel to 2 CSS pixels. If this is true then the 720x1280 resolution is only a logical resolution and not the real physical resolution of the device! This is also the case with the Apple iphone 4 which has a specified resolution of 640x960px, which is actually the logical resolution and NOT the real resolution of the actual device. The real physical resolution for the iphone is half this number after taking into account pixel density, meaning its physical dimensions are actually 320x480, which is true since I use this code all the time!
Therefore, if the S3 also has a pixel density of 2, then its real native resolution is actually 360x640px, NOT 720x960 as Samsung stated. Again, the device maps out 2 CSS pixels to 1 device pixel! Also, why on earth are people use variable media queries, quackery I tell you!
#media screen and (device-width: 360px) and (device-height: 640px) and (orientation: portrait) {
Styles go here
}
#media screen and (device-width: 640px) and (device-height: 360px) and (orientation: landscape) {
Styles here
}
OR:
You can just state the logical resolution which was provided by Samsung, DuH!, Rocket science right?
#media screen and (width: 720px) and (height: 1280px) and (orientation: portrait) {
Styles
}
#media screen and (width: 1280px) and (height: 720px) and (orientation: landscape) {
Styles
}
Very simple! Thats all there is to it. And people wonder why they cant get media queries to work, yet they use all these variable values. Try actually targeting the resolution for the device. There's no reason on earth to ever use variable values such as "max-width", etc.