I am developing an app which runns on mobile and desktop browsers. I'm trying to find a sollution that could fix my icon size. I want icons to be small on desktop browsers but bigger on mobile browsers.
Can media queries detect screen density and if so can screen desinity determine my icon size?
And another thing: Is it better to detect screen size or density and adjust icons depending on the better choice.
Yes there is a media query that detects pixel density. Here is an example:
#media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Then you would change your background image and background image size here */
}
There is also a ton more info in this article at CSS-Tricks.
The question of whether to target device size or pixel density is tricky: it will depend on the specifics each time, and there's nothing to say you shouldn't combine both in your site. The media query you want to cover everything is:
#media (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {
/* your retina rules here */
}
...which is probably the most helpful if you're sticking with PNGs rather than SVG graphics or an icon font. I recommend looking at retinafy.me - it's a useful resource (but not free), which is where that code came from.
Related
I have been doing some research on media queries and I understand the concept of mobile-first design.
I know, that there are lots of questions regarding media queries but none of them targets my specific question.
Also I understand the concept of structuring your stylesheets with media queries like this:
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
However I really need a way for my stylesheets to target only tablets regardless of the browser resolution (width & height). Checking the browser-width is simply not safe enough (and definitely not what I am searching for) in 2015 where some tablets have a bigger resolution than older desktops.
Here is a list of things I have tried so far:
I made a list of "common" tablet-resolutions and simply specified
detailed media queries. This approach failed after I found tablets
with 1024px width (which is the same as older desktop browsers).
I read a lot about media queries and found out that modern browsers (especially on tablets) sometimes ignore specifications like "#media only screen" and that most values of a media query are deprecated.
1.) Is there a safe way to target tablets regardless of their resolution with media queries?
2.) Is there any way to use JavaScript/JQuery to find out if the Browser is used on a Tablet (touchscreen)?
Maybe there is a certain css property OR JavaScript function that is only "triggered" on tablets (I am out of ideas)? Thank you for your help.
You can use this:
#media only screen and (min-device-width: 768px){}
For ref : Media Queries: How to target desktop, tablet and mobile?
Short answer: no.
I would say, what is a tablet nowadays? Some phones are so big that they seem more like tablets and some tablets are so small that they overlap the bigger phones market...
So I would say, go for feature detection, target the features that you are interested in, and the best way for me, apart from media queries, is Modernizr.
You can take a look at their custom builds page and literally pick the features that you are interested in (touch events? geolocation?), knowing that you got the support of a reliable, well tested library.
I've got my responsive website done with breakpoints setted up with #media queries. I've got couple of basic breakpoints
min-width: 1600px - for TVs and bigger resolution screens (that just center the whole page and make white margins on sides, nothing too significant)
max-width: 1024px - for tablets, there are many changes, especially because tablets has of corse touch screen, which desktops usually haven't. At all it looks pretty different.
max-width: 600px - for smarphones, there is also a lot of changes based especcialy on narrowing the content from two or four colums into one.
Now I found that might be a problem, because there are nowdays tablets which acts in the browser, as they have resolution width for example 1280px, but there are also still computers with width of monitor 1280px too, even smaller, so I can't change the breakpoint value for this.
I of course don't want the desktop version on tablet and tablet version on comuter, becase they're created not as much for resolution but more for the platform.
I know that there are things called user agents like WURFL, which seems to be perfect for this. But is there any way how to connect this value from WURFL (tablet, desktop, smartpohne...) with css #media queries.
For example detect in WURFL that the device is tablet and change the breakpoint value in CSS file, so it shows the tablet version, instead of desktop version? Or is there any other way with similar result as this theoretical solution?
There is no need identify the device, just use the right media queries.
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
I think you are looking for this
jQuery code to detect mobile devices
http://www.webtrainingcentre.com/jquery/scripts/jquery-code-to-detect-mobile-devices/
I'd like to categorize devices by screen width in client-side JavaScript code
All devices fitting to one hand (7" less) to mobile category
Treat other devices as desktop devices
Fallback: Treat devices which do not support necessary APIs as mobile devices
Question
Which related JavaScript and CSS APIs I could use to detect the screen physical dimensions? Please note that these APIs do not need to be necessarily supported in older browsers, as there is safe fallback. Also, I don't care about legacy desktop browsers either.
Firefox support is optional - if they have compatible APIs already.
Please note that this is about physical dimensions, not pixel dimensions.
There's no direct way to get the screen size in inches, but there are workarounds that use screen density to find the device size. It's not perfect, but you don't really need to know the exact size to 5 significant figures. Also, it is normally better to simply use pixel values, IMO.
HTML
Make a test div, and then see the number of pixels displayed to get the pixel density, then use that in your calculations. This should work, assuming that your browser/OS are configured properly (it didn't work in the this question but it was within half an inch on my computer).
EDIT: This is 100% wrong. The inch/cm measurements in CSS aren't based on an actual physical measurement. They're based on an exact conversion (1 inch = 96 px, 1 cm = 37.8 px). My apologies.
CSS
The best way to detect physical screen size is to use CSS media queries. The min-resolution and max-resolution queries can be used to get the resolution in either dpi or dpcm:
#media (min-resolution: 300dpi){
// styles
}
Combining it with the min-device-width and max-device-width queries, you get something like:
#media (resolution: 326dpi) and (device-width: 640) and (device-height: 960){
// iPhone
}
The problem is that if you want to target 7 inch devices, you'd have to have many resolutions and corresponding widths that go together, which could get complicated.
For more information:
MDN- CSS Media Queries
MDN- Resolution
"Mobifying" Guide
High DPI Images for Variable Pixel Densities (Somewhat Related)
Javascript
You can use window.devicePixelRatio to determine the screen density. From Android's WebView Reference:
The window.devicePixelRatio DOM property. The value of this property specifies the default scaling factor used for the current device. For example, if the value of window.devicePixelRatio is "1.0", then the device is considered a medium density (mdpi) device and default scaling is not applied to the web page; if the value is "1.5", then the device is considered a high density device (hdpi) and the page content is scaled 1.5x; if the value is "0.75", then the device is considered a low density device (ldpi) and the content is scaled 0.75x.
Then using this, you calculate the physical size by dividing this by the total number of pixels, which can be calculated with window.screen.width and window.screen.height (Don't use window.screen.availHeight or window.screen.availWidth because these only detect the available height).
For more information:
Android Webview Reference
MDN - Screen.width
MDN - Screen.height
devicePixelRatio Explanation
better to use CSS
#media screen and (max-width: 672px){
//your code for mobile category
}
#media screen and (min-width: 672px){
//your code for desktop category
}
I have a responsive web page layout designed for Mobile landscape display (480px) in mind and want to use that same mobile landscape layout for mobile Portrait display at (320px). Can anyone think of a way to scale down this view so that it display also for (320px) without adding another css media query specifically for 320px display?
Set all sizes in rems and jack up font size to 150% in landscape mode? As long as you don't use pixels, everything will scale up
http://snook.ca/archives/html_and_css/font-size-with-rem
To display mobile landscape layout same in the mobile portrait layout you have to use below media query only. So, when you rotate your mobile from landscape to portrait or vice versa, the same layout will display.
#media screen and (max-width: 480px)
I have designed a website using media-query.
In the browser it is looking perfect. But when i am checking in the tablet or in mobile device, in portrait mode it is good,
but when I am changing the device orientation portrait to landscape then it is not looking perfect. So my doubt is "is there any meta-data to disable the device orientation, so even though user change the device orientation then the content will not rotate."
thanks,
naresh kumar.
If i understood you properly, you no need to disable the orientation but rather you can adjust screen elements even when the device is rotated. You can use the below queries:
#media all and (orientation: portrait) { ... }
#media all and (orientation: landscape) { ... }
Because a good design should fit in all devices and in all orientations perfectly...