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

What is Framer? Join the Community
Return to index
Jeppe Reinhold
Posted Jun 17 - Read on Facebook

I'm new to Framer JS, and I'm having trouble.
I've created an artboard in Sketch with the iPhone 6 size (375x667), imported it to Framer Studio, and worked with it for a while. It scales fine in the preview, and in a browser, but when I go to the URL on a mobile (Nexus 5), It only fills up a quater of the screen, and the elements that are suppose to be outside the screen is visible. What am I doing wrong?
I'm using:
Framer.Device.deviceType = "iphone-6-silver"
Framer.Device.contentScale = Screen.width / 375

thanks in advance!


Marc Krenn

Hey Jeppe,

that's a common question :)
375x667 is the iPhone6's relative/point resolution, while its absolute/pixel resolution is 750x1334.

As framer works with absolute resolution, you have to set your Sketch artboard to 750x1334 and re-import your assets to fix this problem. If you do so, there's also no real need to set 'Framer.Device.deviceType' and 'Framer.Device.contentScale'.

Tip: You can pick another device by clicking on "Viewer" in the top right of Framer Studio.

Aalok Trivedi

Nexus 5 dimensions are 1080x1920. Viewing an iPhone based design on a nexus phone will always give you this result. If your using a nexus 6/p the dimensions are 1440x2560

Jeppe Reinhold

Thanks guys! So there is basicly no "fit to screen" as I hoped there would be. :) so I have to use different artboard sizes (or contentScales) for each device. Can I somehow get the current device used, and make switch-statements that scales the content according to that?

Marc Krenn

Vanilla Sketch-imports use - by its very design - a fixed, absolute layout, but you CAN build an adaptive prototype for multiple screen sizes by telling framer where to place layers relative to 'Screen.width' and 'Screen.height'.


A) If there's an layer you'd also want to be centered horizontally, you can either use 'layer.centerX()' or 'layer.midX = Screen.width / 2' instead of using an absolute value like 'layer.x = 524'

B) To fill out the whole canvas with a color or an image, either use a background layer ('bg = new BackgroundLayer') or set 'layer.width = Screen.width' and 'layer.height = Screen.height'.

Jeppe Reinhold

Thanks, I'll try it out! :)

Jonathan Bowman


Read the entire post on Facebook