JavaScript Automatically adjust UI based on screen size

[Owen21]

I'm writing an app that I want to release and I was under the false pretense that using % for width and height will make the UI look the same regardless of what resolution the screens are. How can I automatically scale my app's UI without the UI components changing position or location? The Emulators, the one on the left is my personal phone size (1080x1920), the one on the right is the one I'm testing everything on. I want my UI to look like the one on the right on all devices regardless of size. How can I achieve this.

The code I supplied is the styling of the gray area on both emulators

 root: {
    width: width-20,
    height: '65%',
    backgroundColor: '#28272A',
    alignSelf: 'center',
    borderRadius: 15,
    marginTop: 75,
  },

 

[oliviaeve250]

I'm writing an app that I want to release and I was under the false pretense that using % for width and height will make the UI look the same regardless of what resolution the screens are. How can I automatically scale my app's UI without the UI components changing position or location? The Emulators, the one on the left is my personal phone size (1080x1920), the one on the right is the one I'm testing everything on. I want my UI to look like the one on the right on all devices regardless of size. How can I achieve this.

The code I supplied is the styling of the gray area on both emulators

 root: {
    width: width-20,
    height: '65%',
    backgroundColor: '#28272A',
    alignSelf: 'center',
    borderRadius: 15,
    marginTop: 75,
  },

To automatically adjust your app's UI based on screen size and maintain consistent proportions, you should use responsive design principles. Using percentage-based dimensions (width and height) is a step in the right direction.