Device

The DeviceComponent emulates a device like an iPhone, iPad or Android. It allows you to scale the device, scale the content and adjust the orientation. After the device is set up, everything will render within its screen. Device previews match mirrored previews, meaning that if you're previewing on iPhone and then view it on an iPhone it will appear in fullscreen.
译：设备组件模拟一个真实的设备，比如iPhone, iPad或Android。你可以调整设备显示比例、内容显示比例以及调整设备方向。当设备设置完成，就会在其屏幕内渲染你的原型。设备预览和镜像预览相匹配，也就是说，当你把设备设为iPhone并使用iPhone真机预览时，他就会在你的手机上全屏显示。

Scaling and orientation properties are also prefixed with Framer.Device:
译：你也可以使用Framer.Device提前设置缩放比例和设备方向。

Framer.Device.contentScale = 0.5
Framer.Device.orientation = 90

Underneath, the Device is just a collection of layers. That makes it easy to customize or add behaviour. You can find the entire source on Github. Here are some common examples:
译：本质上来讲，设备也是一些图层。所以你可以自己去定制，或给它添加一些行为。下面给出一些常见的例子，你可以在Github上查看完整资源。

# Set a blurred background image 
Framer.Device.background.image = "photo.jpg"
Framer.Device.background.blur = 10

# Get the screen dimensions for the current device 
print Framer.Device.screen.width  # Output: 640 
print Framer.Device.screen.height # Output: 480

Please note that the scale-to-fit view can render your content off-pixel to retain your screen ratio. Your content will always snap-to-pixel when viewed at 50%, 100% etc. If your browser supports it, device images are compressed with JPEG2000 to reduce image size.

To change the device position simply change the x and y values for the screen and device like you would for a normal Layer.
译：请注意：缩放以适应视图能够让内容按照屏幕比例渲染，有可能像素有些偏差。当视图比例设置为50%、100%时，你的内容将总是以像素对齐。如果浏览器支持的话，设备图像将会压缩为JPEG2000格式用以降低图片大小。

想要移动设备时，也只需要像普通图层一样改变x和y的值。

# Set the Device position 
Framer.Device.screen.x = 50
Framer.Device.x = 50

# Change from the current Device position 
Framer.Device.screen.x += 50
Framer.Device.x += 50