screen size compatibility
shiffman opened this issue · comments
I'm getting "demo not compatible" on an 11 inch air which i feel we should support. Browser innerWidth/Height: 1076x670.
Oops! I didn't realize the resolution was so low on 11" machines. Thanks, Dan.
I've been thinking on this and with a combination of viewport settings and media queries we should be able cover most scenarios. The problem on that particular machine is that the video itself is 720 and anything above your head would get lost. Unfortunately, I don't think there's anything like a viewport setting for desktop browsers or an easy way to uniformly scale everything on the screen.
I should be able to make the video scaleable and can calculate the positions of the sketches based on that ratio, but nothing in the sketches themselves would scale. I think that will be okay for the most part—just bigger circles, etc.
I've done a lot of experimenting and I think the best solution may be something drastic—to author the demo for a fixed size and scale it down with css transforms where available.
It's a little weird for a site to do this and in many cases it will be letterboxed, but I realized that this is the expected behavior for a normal video, so it shouldn't be too weird for an interactive one.
This will also solve the problem of too much whitespace on large displays and the really difficult issue of resizing mid-demo, which threw off the relationship between the video and the elements in a hard-to-fix way.
It needs a little more work, but I can probably post tomorrow.
I reworked everything so that the demo is now targeted for 1280x800 (which is 16:10, a common aspect ratio for monitors). For anything below that, the main canvas and its contents are scaled down using a css transform to keep everything on screen. This will lead to letterboxing when the browser window is at a different aspect ratio, but I think it's a reasonable compromise.
Right now, the demo doesn't scale up and will be framed in larger windows. I may change this later on, but we'd lose quality going larger.
@shiffman, could you please test this out on the 11" screen?
yup, working great!
Thanks! I've tested in all the browsers and platforms I could access and we seem to be in good shape. We can revisit if something weird pops up.