I have been working for several days now to solve a css problem for Phonegap.
I have an App showing a map, and some control buttons. I need to set the map size so I have space for the buttoms.
It works for most of the screen resolutions, but for 480x720, 480x800 and 480x854 it doesn't work for me with three different styles. I have seen other here with semilar problems, but still have problems. The three screen resolutions pick the same style.
For instance this works for 480x720:
#media screen and (min-device-width: 455px) and (max-device-width :
720px) and (orientation: portrait){ /* Styles */ }
Blockquote
But then 480x800 choose the same styling.
If I then create a new styling for 480x800:
#media only screen and (min-device-width : 480px) and (orientation:
portrait){ /* Styles*/ }
Then it works for 480x800, but 480x720 use it too.
I have tried many different things, min-device-width, max-device-width etc. Also I can't figure out why (min-device-width: 455px) works for 480x720 (found it here)
Any help would be appreciated :)
This is just off the top of my head but I believe you need to do something like this:
#media screen and (max-device-width: 480px) and (max-device-height: 720px) and (orientation: portrait)
#media screen and (max-device-width: 480px) and (max-device-height: 800px) and (orientation: portrait)
#media screen and (max-device-width: 480px) and (max-device-height: 854px) and (orientation: portrait)
Providing the correct styles for each screen resolution.
Related
I have like 16 media queries or something and i noticed that if i put every media query portrait 1 different color some are falling under another media query. For instance i have:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
and i have for instance:
#media only screen and (min-device-width: 320px) and
(max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {}
Then both backgrounds are red but i put the second background on purple. I am referring to my own website www.gester.nl. Can someone help me and see into the website with media query code why some media queries are not working like they are supposed to work. Is it that i use a wrong order or something? I just use google f12 to see how it looks on other devices.
Your media queries are overlapping. You will want to use something like the below to target specific screen sizes:
#media only screen and (min-width: 320px) and (max-width: 480px) {
// do stuff between 320px and 480px
}
#media only screen and (min-width: 481px) and (max-width: 568px) {
// do stuff between 481px and 568px
}
I have the following media screens:
/*
768px - 1280px
WXGA - (Windows Phone com DPI alta)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1280px)
and (orientation: landscape){}
/*
1024px - 768px
XGA - (Ipad)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape){}
/*
1366px - 768px
WXGA - (Ultrabook)
*/
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: portrait){}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1366px)
and (orientation: landscape){}
However, there are three (3) rearrangements that have the same pixel,
So he is entering the first 768px without being able to modify it for others.
I would like to know how I do to fix this, since I have (3) resolutions that are as follows:
768x1280
1024x768
1366x768
I assume you don't just want to use this for just few lines of code, but rather for a medium sized/big project.
Your approach is too robust and hard coded. You don't necessary need to be this specific for every device and screen size. This would mean a lot of repeated code.
On your design implementation, focus on the combination between relative + and fixed sizes for elements. (check some well coded responsive template examples)
Then, use #media queries to watch general screen sizes and apply specific changes for these.
A example would be:
/*
768px - 1024px
XGA - (Ipad)
AND
768px - 1280px
WXGA - (Windows Phone com DPI alta)
*/
#media only screen
and (min-width: 768px)
and (max-width: 1280px) {
}
/*
WXGA - (Ultrabook)
768px - 1366px
*/
#media only screen
and (min-width: 1281px)
and (max-width: 1680px) {
}
NOTE: I have replaced device-width(deprecated and often unnecessary) with width.
If you want to check a comparison between them: https://www.sitepoint.com/media-queries-width-vs-device-width/
I'm trying to specifically target my desktop resolution using media query CSS which is 1366 x 768. Therefore i used this method.
#media (max-width: 1367px)
This desktop media query CSS actually works.
Unfortunately, it clashes with my media query CSS for my S4 and iPad which caused them not to be working. As shown below is my media query for my S4 and iPad
S4
#media only screen and (max-device-width: 440px)
iPad
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
Apart from the method i tried above to perfect my CSS, is there any way i can specifically target the desktop resolution of mine which is 1366x768?
#media (max-width: 1367px) and (min-width: 1365px)
Your max-width rule includes everything less wide than 1376px, so you should set a minimum.
Don't forget, these measurements refer to the browser window, and not the actual screen, so they may not be correct for your purposes.
For example, my desktop is at 1600 x 1200.
At full screen, my Firefox window, as it would be referenced by css, is 1583px wide. Not 1600px.
Use more specific queries for your iPad and S4:
iPad
CSS
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
Smartphone (S4)
CSS
#media only screen
and (min-device-width : 320px)
and (max-device-width : 440px) {
/* Styles */
}
Start with the largest screen devices and update the rules as the resolution drops:
#media screen and (min-width: 1367px){ ... }
#media screen and (max-width: 1366px) and (min-width:1024px){ ... }
#media screen and (min-width: 1023px) and (max-width:768px){ ... }
and so on.
If you want to make use of cascading, keep in mind that the last rules will inherit the styles from the rules declared before them:
#media screen and (max-width:1023px){...}
#media screen and (max-width:768px){...} ->
In this case, the screens < 768px will inherit the rules from the previous declaration also.
I am developing one website for mobiles and tablets. for iPhone 5 i am using
#media only screen
and (max-device-width: 320px)
and (orientation: portrait) {}
and
#media only screen
and (min-device-width: 568px)
and (orientation : landscape) {}
and for ipad I am using
link rel="" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href=""
link rel="" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait )" href=""
but both are merging , don't know how.
Is there any other way to use ?
Use only '#media screen and (max-width: Xpx)' at the bottom of your css file.
This Chrome app https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh will give you all the most common screen sizes for you to auto resize your browser windows.
Just use a number a little larger than the screen width, to have a margin of error, and you are good to go.
I like to use:
#media screen and (max-width: 1100px){}
#media screen and (max-width: 660px){}
#media screen and (max-width: 500px){}
#media screen and (max-width: 400px){}
Why does the following CSS apply on Nexus 4 which has 1280x768 resolution?
#media
(max-width: 480px) and (orientation: portrait) {
/* this shouldn't apply on Nexus 4 */
}
This might help to target Nexus 4:
#media screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2)
(http://cssmediaqueries.com/target/LG+Nexus+4.html)
I don't know if the
(orientation: portrait)
Works on most phones so you might want to research this as I know for a while iPhone wasn't using this just the iPad only.
Test with #media all or #media screen instead of #media only.
More media queries here http://css-tricks.com/css-media-queries/