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

What is Framer? Join the Community
Return to index
Eli Beitzuri
Posted Sep 16 - Read on Facebook

I'd like my prototype to scale so it fits whatever device is being used. I'm using Framer.Device.contentScale which works in the browser, but not on actual devices. What should I be using?

4 Comments

Eli Beitzuri

Managed to solve this on my own.

Framer.Device.contentScale will only scale content rendered in virtual devices (ie when viewing a framer prototype in a desktop browser, or in the Framer development environment)

I put my entire prototype in a parent layer and applied layer.scale to that layer.

While this works in actual mobile devices, it borked the scaling in virtual devices.

So I found coffeescript code to detect mobile browsers:

@mobileWeb = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/i.test(navigator.userAgent)

I added an if/then statement to decide which kind of scaling to apply:

if @mobileWeb
sketch.prototype.scale = scalingFactor
else
Framer.Device.contentScale = scalingFactor

Nick Hanigan

Did you see the Kevyn Arnott's post of the 4th August? It appears there is cool resizing working going on with his module.

Koen Bok

Sounds like we can improve this right? Jonas didn't you look at this too this week? George do you run into this often?

Andy Jakubowski

My teammate and I just encountered this problem as well, Koen. We design flows at 320 pt and want to test them on an actual device. It’s okay if they are scaled up, as long as they fit the screen. Basically the equivalent of contentScale for real devices would be perfect :)

Read the entire post on Facebook