Has anyone discovered a reliable method to determine the device pixel ratio for Windows Phone 7.5 (Mango).
It is based off of IE9. In Webkit based browsers we have window.devicePixelRatio or using window.matchMedia() with the appropriate media query.
In Windows Mobile I can determine pixel ratio by doing:
screen.deviceXDPI / screen.logicalXDPI
though this appears to only be reliable once the page has been fully rendered. Prior to that deviceXDPI reports the same as logicalXDPI
Has anyone found a solution?
Thanks for any help/suggestions
Use (min/max-)resolution as the equivalent test in a media query:
#media (min-resolution: 1.5dppx), (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2) {}
or through matchMedia:
if (window.matchMedia)
{
if (window.matchMedia('(resolution: 96dpi)').matches) { }
// resolution feature & dppx unit
if (window.matchMedia('(min-resolution: 1dppx)').matches) { }
// -webkit-device-pixel-ratio feature
if (window.matchMedia('(-webkit-min-device-pixel-ratio: 1)').matches) { }
// -o-device-pixel-ratio feature
if (window.matchMedia('(-o-min-device-pixel-ratio: 1/1)').matches) { }
}
References
MSDN - resolution media feature
CSS WG Blog – How to unprefix -webkit-device-pixel-ratio
Related
So yet again I find myself pulling my hair over responsive images. The CMS gives me its srcset, I build a simples sizes attribute, I check the currentSrc by hover-fumbling over the attribute in Dev Tools– wrong Src! Go to 10, change a media condition maybe, save, reload, hover, repeat until it kinda works. Hope it will never fail for other images.
There must be a better way to do this? Considering that Firefox is still better than Chrom* at debugging Webfonts and that only today I have found Add device pixel ratio in Chrome's Dev Tools, I wonder if I'm overlooking something. I know of & have used placeholder images, but they can be a pain to set up and they can't tell me
is the sizes attribute syntactically correct?
how many device pixels does the browser consider the image to be in the current viewport? How many "srcset w-pixels" is that?
and most importantly: which media condition matches the current viewport? Why?
EDIT: came up with this example, hope it helps:
<img
src="foo.jpg"
sizes="(max-width: 599px) 100vw, ((min-width: 600px) and (max-width: 1000px)) 33vw, 300px"
srcset="foo_a.jpg 300w, foo_b.jpg 768w" />
Viewport at 650px, device-pixel-ratio 1.
DevTools tells me:
currentSrc == "foo_b.jpg"
Why? Which condition is this? What does 33vw end up as? 650px*33/100? How does it relate to 300w? How is this closer to 768w?
Please note that I'm not really asking about these specific values, but a general workflow.
EDIT2: I am probably asking for a Dev Tools feature (or extension) that would tell me, in this case:
Viewport 650px
matches ((min-width: 600px) and (max-width: 1000px))
650px # DPR 1.0 = 650w
=> 33vw = 650w*33/100 = 214.5w
closest src = foo_a.jpg 300w
BUT, I have foo_b.jpg in cache
pick foo_b.jpg
is the sizes attribute syntactically correct?
In your case no. Outer parens on ((min-width: 600px) and (max-width: 1000px)) appear to be extra.
how many device pixels does the browser consider the image to be in the current viewport? How many "srcset w-pixels" is that?
If you know your device pixel ration (DPR), you can use that value to divide real image width (w value in srcset) to get pixel width that will image occupy on screen.
Browsers know this from srcset and sizes attributes you provided and take it into account when deciding which image to use.
and most importantly: which media condition matches the current viewport? Why?
Media queries in sizes attribute work exactly same as CSS media queries. So first valid media query, reading from left to right will be applied. Funny thing browser does (Chrome at least), if one query between set of commas is invalid it won't invalidate whole sizes attribute, just that query.
You can test this by applying those same set of media queries in CSS, like so (note I'm using Sass):
body {
#media (max-width: 599px) {
&:before { content: "max-width: 599px"; }
}
#media (min-width: 600px) and (max-width: 1000px) {
&:before { content: "(min-width: 600px) and (max-width: 1000px)"; }
}
In case of your second query, my linter reported invalid format until I removed outer parens. That's how I knew about your first point.
My test example: https://codepen.io/teodragovic/pen/eXjPoz
Good reference article: https://ericportis.com/posts/2014/srcset-sizes/
I know how to use #media to target specific devices based on max-width, like so
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
But is there a quick way to do it based on device, like so
#media screen and (min-width: small) {
body {
background-color: lightgreen;
}
}
#media screen and (min-width: medium) {
body {
background-color: black;
}
}
Yes there is, using a CSS preprocessor, such as Sass, you can do:
$small: 480px;
$medium: 720px;
#media screen and (min-width: $small) {
body {
background-color: lightgreen;
}
}
#media screen and (min-width: $medium) {
body {
background-color: black;
}
}
I saw your question about media queries and I used to think of the same question. However, in my opinion, both fubar and Raptor are correct in their answers.
That said, I would like to point out one method of using media queries that I personally feel may be one of the more versatile methods.
I personally believe that using Google Chrome's developer tools and slowly shrinking the screen size to see when certain aspects of your website either looks awkward, or just plain breaks, taking note of those screen sizes and then writing media queries at those breakpoints may be the best way to have your site look good on the widest variety of screen sizes.
From my own personal experience, once I start concentrating too much on specific device sizes, particularly when it comes to dealing with the different screen sizes of Android vs Apple products, I inevitably had to go down entire product lines to nail the different classes of screen sizes. That makes for code that can become convoluted in a hurry!
I know this answer doesn't have specific code and can be considered more of an opinion than Dev Bible fact, but I strongly feel that the method I described is the one that (especially if you are not too experienced and are not aware of the various classes of mobile device screen sizes/resolutions out there) will yield the most versatile results.
I hope that helps puk. And if you or anybody feels differently or would like to provide a contrary opinion, please feel free to present it. I do not claim to know everything and am always eager to learn new things, methods and points of view!
I have a VERY simply html form (an image with some text & select fields) which I would like to change to be available also for mobile devices.
What's the SIMPLEST solution for accomplishing this task ?
I found many explanations on the web, but they are all much too complex for my needs... Basically I just want to have the width of the form adjustable according to device, nothing more :)
Any reference to a SIMPLE tutorial that explains how to do the most basic adjustments for mobile ?
You could use CSS3 Media Queries to build a Responsive Layout.
For instance:
#media (max-width: 767px) {
.yourFormClass {
/* Some rules */
}
}
#media (min-width: 768px) and (max-width: 979px) {
.yourFormClass {
/* Some rules */
}
}
/* other resolutions... */
I suggest you to read these articles:
How To Use CSS3 Media Queries To Create a Mobile Version of Your
Website;
CSS media queries by Mozilla Dev.
I am looking for the perfect way to detect tablets. With media queries you can set min- and max-widths for specific CSS. But there are tablets that have higher resolutions than soms desktop monitors. So that will give a conflict.
With Javascript (Modernizr, Detectivizr) tablets are recognized and sets this in the HTML with a class 'tablet' on the HTML tag. But... Not all users have Javascript enabled.
So what you want is (in my opinion) use CSS to detect tablets. Does anyone know the perfect solution for this?
Thanx in advance!
You can check against the navigator.userAgent, but its JavaScript, like this:
var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
EDIT
I found this:
#media only screen and (max-width: 760px) {
/* Styles for phones */
}
This seems to detect if the width of the browser is the size of a smartphone.
See the answers in this question for more info
You can obtain a reasonable degree of accuracy by using CSS media queries:
#media only screen
and (max-device-height : 768px)
and (max-device-width : 1024px)
{
/* CSS Styles go here..... */
}
The above should detect when the device screen size is less than 1024x768 (a common screen size for desktops).
As you have stated above it is not perfect if you just use CSS because some tablets have a screen size larger than 1024x768.
The only way that I know of to increase the accuracy is to use javascript to sniff the userAgent string. See the question that GeenHenk linked to (What is the best way to detect a mobile device in jQuery?).
What about using mobile-detect.js? I've just utilized it for my project - it's got nice .tablet() method.
UPDATE (for maxshuty)
I'm using it in the following way:
var md = new MobileDetect(window.navigator.userAgent);
if( md.tablet() || !md.phone() ) {
// your code here
}
I would like to use a conditional statement to attach a different stylesheet for:
if the clients resolution is <= 1024*768
I'm pretty sure this is possible, but have never seen the code for it before?
ps. I am not looking for a javascript solution
Typically people don't "attach another stylesheet" for screen resolution because you could resize the browser after page load, changing the resolution, and you don't want file loading every time you do.
This will do the trick, in one CSS file:
Ex:
/* css as usual */
.this-class { font-size: 12px; }
/* condition for screen size minimum of 500px */
#media (min-width:500px) {
/* your conditional / responsive CSS inside this condition */
.this-class { font-size: 20px; }
}
This should change the font size to 20px when the #media query condition is true, in this case when the screen is over 500px.
As you size your browser up and down you will see the conditional CSS rules take effect automatically, no JS needed.
CSS 3 introduces media queries, but it is new and support is not all that widespread yet (Firefox only introduced it in version 3.5, for instance, and Internet Explorer won't get it until version 9) so build with progressive enhancement in mind. CSS Tricks has a tutorial for providing different CSS for different browser window sizes (which is a more useful metric then display resolution).
You can test support for your browser.
There's this option, totally client side and javascript driven, add a script tag:
<script type="text/javascript">
if (screen.height < 900) {
document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');
} else {
document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');
}
</script>
You could even add other if statements for smartphones and tablets.