How to handle different screen resolutions in Firefox-OS?

Question

I need to display a full screen image in Firefox OS. I have a "peak" dev preview phone with qHD resolution (960x540px).

How can I make sure my app will look good on other firefox-os devices with different screen resolutions as well?

Answer 1

Your best friend for multiple screen size support is to use responsive design.

Here is a couple resources to help you get started:

• https://marketplace.firefox.com/developers/docs/ui_guidelines
• https://marketplace.firefox.com/developers/docs/patterns

Answer 2

You have a couple of options right now, and I believe there is work in progress to add support for different resolution in the simulator as well. In my opinion, currently your best bet for testing apps in different resolutions is to run them in Firefox browser and take advantage of the responsive tools. You can do this the same way you build any gaia apps. Put your app in the gaia app folder, then run:

$ DEBUG=1 make

In the last line of output you will see something like:

Profile Ready: please run [b2g|firefox] -profile /path/to/your/gaia/profile

I suggest using Firefox nightly for this because it has the latest development tools and updates. On my system nightly is in /usr/bin/firefox-trunk so I would run something like this:

:~/Projects/gaia$ /usr/bin/firefox-trunk -profile /path/to/your/gaia/profile calendar.gaiamobile.org:8080

Firefox has a special interface for handling gaia profiles. It is also VERY nice to be able to edit CSS and inspect your app in this mode.

According to this MDN page you can also set screen resolution when using B2G Desktop. You can specify screen resolution when running b2g desktop and then pass your gaia profile to it. It would be something like this:

./b2g-bin --screen=320x480@160 -profile /path/to/your/gaia/profile --runapp yourapp

I am not able to successfully use this command on Linux right now, but it might work if you are on Mac.

Hope that helps a bit