Bekijken van de viewport in css

11 jan. 2013 22:19 | Geplaatst door Marcel |

Measure the viewportEr is veel te doen over responsive design, een techniek om websites vorm te geven voor oa. een mobiele telefoon. Of een televisie. Of een koelkast.
Op mijn werk werken we vooral met de max-width media query.

Bij een mobiele telefoon zijn er verschillende besturingssystemen en browsers, en een pixel schermbreedte (hardware) is niet hetzelfde als een css pixel. Om dit simpel toonbaar te maken, en zo te testen welk apparaat welke viewport heeft, heb ik een scriptje geschreven. Het geeft gewoon aan wat de breedte is van het scherm in css-pixels.

Van het script is hier de uitvoer te bekijken. Ook de broncode is beschikbaar.