I know that imageset is the CSS equivalent to HTML's srcset attribute. However the current spec only supports the x pixel density units, not the w and h sizing units.
For example:
<img srcset="high.jpg 2000w, medium.jpg 1200w, low.jpg 800w">
If I resize my browser window to 400px wide Chrome first loads low.jpg. As I make the window wider it loads first medium.jpg then high.jpg. The point at which is switches is dependent on my display's pixel density so my retina Macbook loads the higher resolution images at half window size compared to my old Windows laptop.
How can I reproduce this behaviour for a CSS background image? I started doing it by specifying a bunch of min-width and max-resolution media queries but it quickly became a tangled mess. There must be a better way. I'm willing to use a JS polyfill if available.
There is unfortunately no easy way (yet?) to match srcset-w features in CSS.
You should read this great article on the topic: https://css-tricks.com/responsive-images-css/
CSS media query: pixel ratio
Or Picturefill
Related
I started to design a div which is supposed to represent a mobile header. I designed it using a height in pixels, problem is that this looks different on other mobiles. I think this is the issue of pixels are not DPIs.
In the android world this is easily fixed. I am using a standard HTML website, I am using a bootstrap grid with scss (sass).
Is there some way to allow the height to remain the exact height on each device that has a different DPI ratio?
Really lost here, I presume this problem has a solution?
I think this problem is also going to be the same for pixels and images, on some devices its going to occupy a different amount of space between different device DPI's. What is the solution here?
Use em instead of pixels, em are relative to the device standard font size
Is there a way to fix the Retina Blurry icons on cellphones without using the 2x sizing images hack?
I'm a Front-End developer and the Designer is not avaibable to giving me the icons of the Website at the double of its size.
So, I was wondering if there is any way to keep the original icons size and make it looks correctly on cellphones with Retina display.
Small pixel images are automatically enlarged by the browsers and the quality of the anti aliasing is depending on the rendering engine of the browser.
If you don't want to use the media queries #2 trick you could use svg icons instead as vector graphics are cristal sharp on every screen resolution and ppi.
Edit: As mentioned in the comment below you can disable antialias in browsers as described here: Disable antialising when scaling images
But that will not create eg a sharp round circle out of a 16 pixel graphic as the pixels will still be squared pixels (just enlarged)...
Normally when I am creating a responsive site, I do the normal thing of setting a viewport to the device width, and creating different layouts for different screen resolutions.
But I'm doing a few tweaks to an old site that has big chunky buttons, default font sizes and a simple layout, and actually it looks quite usable when viewed as a desktop-style fixed-width layout, even on small mobile devices.
Rather than specifying a viewport and completely rewriting all the css to make a series of mobile-friendly versions, I'd really like to just increase the main body element font size a little more for viewing on a screen that is physically small: for this particular layout, this would be very usable - if I could work out how to do it!
Is this what -webkit-text-size-adjust: is for? It seems like it should be an easy thing to tweak, but all my googling turns up full responsive design approaches, which are overkill for this particular small task.
A way to make it is to detect the screen width with javascript using the window.screen.width property, and then apply the styles that you want from there.
Here's an example using jquery, however the same can be achieved with native javascript if you don't want to use a library http://jsfiddle.net/UXV7Z/
You can apply as many filters in resolution as you need, just like you would using media queries
DONT use javascript for such a simple task to accomplish with modern CSS, just use:
font-size: calc(80px - 3vw);
and adjust the values accordingly. That will icrease the size on smaller devices and decrease it on wider devices, which makes sense for buttons and footers and what not, but if you want to decrease the size on smaller width screens for text like large titles that overflow just use:
font-size: calc(25px + 0.35vw);
Once again adjust the values to fit your needs. And see here to view the browser support for the CSS calc() function. All modern updated browsers support it
I am trying to develop a mobile version of my web application and I am having trouble getting it to look good on multiple browsers. I figure if I use some device capability detection I can dynamically generate widths and font-sizes based on a particular devices screen size. The problem is that it seems like a mobile browser doesn't treat 1px of CSS width equal to 1px of screen width. On an iPhone with a screen width of 320px, a body tag that is 320px wide takes up only about a 1/4th of the page. With no real frame of reference, it makes it hard for me to say "On a screen of 320px wide, make the font 16px" or something along those lines. Is there some general rule of thumb I can use to calculate the real browser width in CSS, or some calculation using multiple device capabilities that will help me generate dynamic CSS more effectively?
Thanks,
Mike
Try defining sizes and font weights in relative units. I would give % and em a go. Many mobile browsers try to scale everything down so that they render normal websites nicely. You may find you need specialy meta tags or the like to controll these browsers.
If we make fluid layout we can use em or % for font and div width and height to make fluid but how to make images resizable?
I want to make one layout for all sizes and devices
Joel Spolsky managed to find a very easy solution (a small proprietary CSS definition for IE). He found the solution here.
There's no simple solution for this. You can use flexible units for the images just like you can your other page elements. But this will result in inefficiencies and aesthetic issues including excess file size for a tiny image (if you're sizing it down), pixellation of sized-up images, etc. So what you likely want is to start with a large image and scale down to the appropriate size versions, and use Javascript to write out a tag referring to the correct size image depending on context.
Well you can size images relative to the viewport width (eg. img.thing { width: 50%; }, but you don't generally want to. Scaled images will at best (when the browser does bicubic resizing) look a bit blurry, and at worst totally blocky/jaggy (nearest neighbour resizing). You can include some CSS (SVG's image-rendering will be supported for HTML in Firefox 3.6; -ms-interpolation-mode in IE) to try to coax the browsers to use the better scaling mode, but it's far from reliable and still the best rendering isn't that great.
In addition, CSS background-images cannot be resized at all (yet; it is proposed for CSS3 but you'll have a long wait).
Liquid layout generally aims to adjust the distances between fixed-size images to respond to changes in viewport width, rather than scale the whole page including images. The user can, at least in modern browsers, zoom the whole page including images themselves, taking the image quality hit if they need to.
I reckon you will have to make use of the canvas element from HTML5. Or you could have some JavaScript that sets the size of the image tag but you would have to do some math to figure out the correct proportions.