Different css for device?

[noodlebit]

Hi all,

I'm working on adapting my watch face to the Versa, however, due to the slimmer width and taller height I'd like to adjust some font sizes and adjust the layout a bit for the Versa.

I've found I can get the device type by using the device api (https://dev.fitbit.com/build/reference/device-api/device/) so I can identify whether I'm on an Ionic or a Versa.

I can also get a handle to my svg element and change font size easily using javascript, like this:

const cals = document.getElementById("calories"); // SVG text element

cals.style.fontSize = 34;

However, I can't figure out how to adjust my x,y coordinates via javascript in my SVG text element. I thought the easiest way would be to load device-specific CSS instead of manipulating the elements via JS. Is this possible to do? Otherwise, how would I change the x,y attributes of my SVG text element via JS?

Thanks! 

[JonFitbit · Accepted solution]

The easiest way is to let the build process determine the correct CSS file for each platform.

Create these files:

styles-common.css
styles.css
styles~300x300.css

Change your widgets.gui file to include the common.css file:

<link rel="stylesheet" href="styles-common.css" />
<link rel="stylesheet" href="styles.css" />

When you build your project, the styles.css file will contain the contents of styles~300x300.css on Versa, but other platforms would just get the default styles.css. Both platforms will get styles-common, so all of the CSS which is the same for both platforms should go there.

Enjoy!

https://dev.fitbit.com/build/guides/multiple-devices/

[noodlebit]

Missed that article in the docs, thanks! Worked perfectly.

[MihaelaNistor]

If I don't use the build process, it's another way to use multiple css files?