0

when building famo.us apps, how are people dealing with screensizes for different devices?

i actually do NOT want to do a responsive layout - i would be happy with just scaling the content to fit the device.

Although we can use % positioning for famo.us elements, this doesn't work for fonts. Especially as the viewport-size based font sizing isn't supported by the android browser.

Is there a way to render into a surface of a fixed size, and then have that surface simply scaled to fit the viewport? perhaps with a fixed setting like:

#jade
meta(name="viewport", content="width=500")

Any other approaches people are taking for hitting desktop, tables, mobile would be great to know.

dcsan
  • 11,333
  • 15
  • 77
  • 118

1 Answers1

0

You can calculate a surfaces size based on the viewport size, if you use window.innerWidth and window.innerHeight, so for some surfaces you want taking up 10% of the screen, you would do the following: 

    var surface = new Surface({
          size : [ window.innerHeight * 0.1, window.innerWidth * 0.1 ],
    });

This is what I'm doing, anyway. However, there is issues with this, if the screen is resized, the elements aren't, so if a user switched their android device from portrait to landscape while viewing the page, there's a problem.

I have yet to see an elegant solution to responsive-design using Famo.us.

Glen Keane
  • 62
  • 11
  • this works for surfaces with images, but i was more after a way to handle surfaces that have random html. using mediaQueries and scaling through responsive CSS is kind of a pain. This is for a game app, where its fine to just scale everything to fit the device its rendering to. – dcsan Jun 28 '14 at 13:55