Tuya Developer PlatformApp DevelopmentDevice PanelPanel SDKs（React Native Panel）APIUtilsRatioUtils

RatioUtils

Last Updated on : 2023-10-12 08:00:23download

This topic describes the utility method that is used to proportionally scale a component of your app to adapt to different mobile screens.

API operation name

RatioUtils

API description

Proportionally scale a component of your app to adapt to different mobile screens. This allows Android or web apps to support varied screen parameters such as width.

Request parameter

Name	Description
hRatio	The horizontal ratio of the screen. It is the width ratio of the current mobile screen to an iPhone6 screen.
vRatio	The vertical ratio of the screen. It is the height ratio of the current mobile screen to an iPhone6 screen.
width	The width of the current screen.
height	The height of the current screen.
ratio	The diagonal line ratio of the current mobile screen to an `iPhone6` screen.
convertX	Use `hRatio` to calculate the width of a component.
convertY	Use `vRatio` to calculate the height of a component.
convert	Use `ratio` to calculate the diagonal line of a component.
isIos	Specify whether the iOS is used.

Sample request

import { Utils } from "tuya-panel-kit";
const { convertX } = Utils.RatioUtils;

// The designed width of the component is set to 13.
width = convertX(13); // The width of the component that appears on the current mobile screen.

Prev DocUtils

Next DocColorUtils