Reputation: 53
I am relatively new to react native and am not looking for actual code however I am wondering the best way to implement layouts/ styling of a page so that it looks the same proportion wise across multiple different devices and operating systems. For example iPhone X through to 13 have different size screens and then if you include the new Samsung's, Google Pixels and Huawei phones there is a lot of different sizes of screens.
I can create different styles by detecting what device is being used and getting the logical resolution from that however I am wondering if there is a better way than just doing this for 10 different phone sizes. For example in the picture you can see the front wheel of the car is on the edge of the blue box which gives it an almost 3D effect.[] To get this effect across 2 different devices I have to change the absolute positioning of the car for both devices however the more screen sizes/ devices I want it to look the same on the more code it is and it seems like I am using a long winded/ redundant method.
Another alternative I have thought about is just turning that section into an image and using it as a background image however I am not sure how that will affect performance.
Any thoughts?
Upvotes: 2
Views: 352