I'm trying to change image size with css styles for different devices. The common way of doing so is to use media queries to check device resolution and then switch to corresponding style.
However despite the big resolution in pixels on modile devices, the real size of mobile screens is smaller then desktop screens, and so the image as well. Because of that on desktops image looks too big and blurry and on mobile devices too small, even with right resizing that depend on resolution. So my idea is to check what that device really is and adjust size depending on that and not on screen resolution.
On desktops I want to set max-width of the image to 840px, so it would never be too big (the height correspond to width) and on mobile devices don't set up max-width at all, so image can be as big, as all the other resize-logic allow.
The best I have so far is cheking for orientation - portrait always mean mobile. But in landscape orientation I still can't figure it out how to resize right for different types of devices.
