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.
It's my understanding that this query would target specifically my iPad Air 2 and apply the styles that I have added. However, nothing is applied and it looks the same as the Desktop view. I had to apply a different menu for my website to scroll properly on my iPhone, (overflow-y:scroll / hidden didn't work so I created multiple sections that display menu options as opposed to displaying the content in a div) but I'm having troubles targeting iPads as they also do not scroll properly.
#media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
/***
my css goes here
**/
}
The following works on iPad Air 2
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)
Put this meta tag in before the query:
<meta name=viewport content="width=device-width, initial-scale=1">
You can read more about what it does here: Responsive Meta Tags
You may want to not put all of the desktop and mobile css all in the same page but make links to different sheets. That way you save on initial load time and won't waste time loading both of them. Like this:
<link rel='stylesheet' media='only screen and (min-width: 821px)' href='css/big.css' />
<link rel='stylesheet' media='only screen and (max-width: 820px)' href='css/little.css' />
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'm looking answers for some questions about CSS3 feature - Media Queries:
Which way is better (for browser due to the performance) for declaring css rules for different resolutions?
//this in head:
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
//or this in css file:
#media only screen and (max-width: 1024px){
//styles here
}
What is difference between max-device-width and max-width? Is it only rule addressed for mobile(max-device-width) or desktop(max-width) browsers?
If I write media query rule for tablet with resolution 1280x800 where user can also use portrait/landscape mode, how should it look? I should write rules for max-width: 800px and max-width: 1280px or there is another way?
If I write rules I should write something like this:
<link ... media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)... />
or instead this two:
<link ... media="only screen and (max-device-width: 480px) ... />
<link ... media="only screen and (max-device-width: 1024px) ... />
P.S. Please excuse any spelling or grammatical mistakes, English isn't my first language
P.S.S. Before I posted this question I spend a while to search on stackoverflow and didn't find information about this question. If I was wrong and there is similar question I will delete my post.
Rules in css file to reduce number of requests (better for performance).
max-width is the width of the target display area
max-device-width is the width of the device's entire rendering area
The another way I know to target portrait or landscape is to add orientation like this:
/* portrait */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
/* styles here */
}
/* landscape */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
/* styles here */
}
To define a stylesheet for mobile devices with a width between 320 and 480 pixels you have to write:
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="mobile.css">
I'am searching for good information about best practices in responsive design and I'll give you an advice.
In This question the developer get into a problem when he use CSS portrait condition and make the keyboard appears when he choose a input text of the document. I'm not sure why but it breaks the portrait condition.
In This website you can find information about better practices when you are creating media query's which I think are the best. Personaly I'll use the Exclusive type of media query in my website.
But by the other hand you could follow This site recomendations. I think that they are right but I prefer to create and use popular device dimentions media query's by myself.
Here is the list:
< 480px (which applies to older, smaller smartphone screen sizes)
< 768px, which is ideal for larger smartphones and smaller tablets
768px, which applies for everything bigger such as large tablet screens and desktops screens.
Also, these can be used too if you've got the energy and time:
<320px, which is great for older small, low res phones
1024px stylesheet for wide screens on desktops.
I hope it help you.
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.