Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Automatically adjust UI based on screen size

Owen21

New Coder
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

JavaScript:
 root: {
    width: width-20,
    height: '65%',
    backgroundColor: '#28272A',
    alignSelf: 'center',
    borderRadius: 15,
    marginTop: 75,
  },
 
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

JavaScript:
 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.
 
Back
Top Bottom