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!

6 Comments

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'.

Examples:

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

Thanks!

Read the entire post on Facebook