calculate rows based on device pixel ratio

[MaikRe]

Why? What?

Use device pixel ratio to determine number of rows to use.
I.e a laptop screen will generally have 4 rows, regardless of the screen resolution because the screen isn't very large and having tiny but high resolution pictures does no one any good.

Fixes #10

ToDo / Known Issues

• On certain devices like phones this creates the issue that the number of selected rows (3-4 when phone is vertical) do not create enough horizontal space for any images to be added and the kiosk runs into an endless loop in the addImagesUntilScreenIsFull function

Ideas for Next Iterations (Not This PR)

How to Test

• Set yoursecret in yaml
• Docker compose up
• Go to 0:0:0:0:3000:kiosk.html#yoursecret
• Test on various devices, using Firefox to simulate different screen sizes is one option, preferably this should be tested on real screens/projectors etc. The idea is that at a comfortable viewing distance the images should always have a reasonable size.