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 */ }
The website was working absolutely fine a few months back. Suddenly no iPhone is reading a single media query within the css file. I have done the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Included in my html file.
/* Iphone 6 plus portrait & landscape */
#media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
Included in my CSS file
Tried the following:
#media all and (min-device-width : 414px) and (max-device-width : 736px) {
and (-webkit-min-device-pixel-ratio : 3)
and (min-resolution: 401dpi)
and (device-aspect-ratio:16/9)
Nothing.
I checked that the CSS file is loading.
When I check the site via Chrome, on my Windows PC, in the iPhone 6+ resolution it looks perfect. But the client, as well as every single iPhone simulator I have tried, is showing none of the media queries. I do not actually have an iPhone, but the client does.
Can anyone please explain how this could be happening? What am missing? Please help.
So apparently the solution was to add (max-width) / (min-width) alongside every max-device-width and min-device-width. This made the query:
#media only screen and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait),
only screen and (min-width: 414px)
and (max-width : 736px) and (orientation : portrait) { }
This is working on the simulator, will test further and add more if required.
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
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.
I do not own any iOS devices, thus all my web coding development is done on Safari. I've been trying this awesome project to do my testing, but I'm finding out that it's possibly limited.
Specifically, I want to use specific media queries within my main CSS so that only the iPad can render the CSS:
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
When I try access it via localhost on OS X Safari using the Responsive Testing project using Safari on OS X, it ignores the code. I even tried more specific code for landscape and portrait with no success:
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
This wasn't successful either.
Since I don't own the iPad/iPhone, I can only see the result at the Apple Store. Is the code I provided literally only accessible on the iPad and I can't use Safari on my computer to do some initial testing?
For those who don't own an iOS device like an iPhone, iPad, or iPod Touch, the cheapest/free way to develop without the hardware is to download XCode and run the iOS Simulator. You can quickly switch between the devices in the simulator and they load as they would on the devices themselves.
Rock on and thank you to #icktoofay!