Last active
March 4, 2018 13:04
-
-
Save RayPS/e2ecfb78c4db91e363235fb3f47958c5 to your computer and use it in GitHub Desktop.
Framer Design At 1x
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
is_iPhone = Framer.Device.deviceType.includes "apple-iphone" | |
is_iPhonePlus = Framer.Device.deviceType.includes "plus" | |
is_iPhoneNotPlus = is_iPhone and not is_iPhonePlus | |
if is_iPhonePlus and Utils.isFramerStudio() then Framer.Device.content.scale = 3 | |
if is_iPhoneNotPlus and Utils.isFramerStudio() then Framer.Device.content.scale = 2 | |
document.querySelector("head>meta[name=viewport]").setAttribute "content", | |
"width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" | |
Framer.Device._update() | |
screen = new Layer # Be sure to use "screen" instead of "Screen" | |
width: Screen.width / Framer.Device.content.scale | |
height: Screen.height / Framer.Device.content.scale | |
# ------------------- | |
layerA = new Layer | |
size: 375 | |
borderColor: "red" | |
borderWidth: 10 |
This is great work.
Any plans to extend this to Android devices too?
@vennsoh Yes you can, if you preview on actual device it's working.
for FramerStudio preview just add more scale factors just like line 5 and line 6.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is the final solution to let me design at 1x,
it took me a few weeks to think about it, hard to get in sleep every night.
Previous Context & Discussion: https://www.facebook.com/groups/framerjs/permalink/923737497753322
Alternative solution: framer-DevicePixelRatio by dear Jordan