This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jonathon Toon
Posted Nov 06 - Read on Facebook

I wish to use Screen.width to dynamically set the width of an element based on my choice of device however I've noticed that the values returned are infact incorrect and scale based on the width of code and device panels within Framer Studio, ie: When the device panel is wider than the code panel the width will increase but when the code panel is wider the width is less.

So if I have set an iPhone5S I'd expect Screen.width to return 640 however it does not.

Is there something I'm not doing right here?

10 Comments

Benjamin Den Boer

This is what you're looking for:
(With iPhone 5s set as device)

print Framer.Device.screen.width # 640
print Framer.Device.screen.height # 1136

Screen.width calculates the width of the entire preview window.

Jonathon Toon

Dammit, that's all I was missing? Haha, thanks!

Dean Broadley

Hi Benjamin, I've noticed when using this calculation it's fine in Framer and when previewing in the browser, but when you "Home Screen" the app, all the coordinates go whack. Have you ever experienced this?

Benjamin Den Boer

Hey Dean,

Well, the values of Framer.Device.screen.width/height are relative: the returned values depend on the device you're viewing your prototype on. So, when I view a prototype within the iPhone 6 in Framer, and I print the values, it returns 750x1334. However, when I preview that same prototype on my iPhone 5, it returns the width and height of its screen: 640x1136.

Dean Broadley

Thanks Benjamin, that makes sense. So what Im experiencing is on the same device and getting different readings. So if i center something, it's centred in the Devices web browser, but when i "Home Screen" it, everything is off centre...It's quite a pickle :P

Benjamin Den Boer

Hey Dean, hmm. How are you centering your layers? You could use the layerA.center() function, too. You don't need the Screen.width/height values when using center() :)

Amit Jain

I was messing with this two days ago! Thanks for the answer Benjamin.

Amy Casillas

Benjamin, when I print "Framer.Device.Screen.width" I get an error, but "Framer.Screen.width" works fine. I'm using Framer 1.99 (594). Are you using the same version?

Koen Bok

Yes so there are now a bunch of places in Framer where you get actual screen sizes that don't account for a selected device size/scale. I'm working on a way to elegantly fix that. Until then, Benjamins tips are the way to go.

Dean Broadley

Benjamin I am using Layer.center() in most cases but some things i need positioned relative to screen height and width. But it only seems to be an Android issue, iPads & phones work fine :D

I seem to be able to force the screen size check on a drag or screen rotate...bit of a hack but it seems to do the job. Many thanks for your tips! they have been helpful elsewhere as well!

Thanks Koen! Really digging Framer so far!

Read the entire post on Facebook