High DPI: Tips and Tricks
If you follow these seven simple guidelines, you’ll find your site looks great on any high DPI display.
width=device-widthmeans you only have to care about device independent pixels
- If you don’t set the viewport to
width=device-width, or if you use a fixed width, you’re in a world of hurt.
devicePixelRatioon high DPI devices can range from 1.3 to 3 and is about more than just phones or tablets, there are laptops too!
- Use vector images wherever possible
@mediaqueries to specify appropriate background images
- Highly compressed 2x images work well in many cases
- For sharp
canvasimages, beware of