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
- A web UI for my Pi
- Seeing the world through high DPI
- Viewport target-densitydpi support is being deprecated
- Meta viewport syntax – comma or semi-colon?
- Using meta viewport
- Thinking about the offline web
- Happy Blue Beanie Day
- Canadian Chrome Web Store Incentives
- The Anatomy of a Great Chrome Web Store Listing (Updated)
- Google Developer Days – South America