Hi, folks
Does anybody can describe how to ship scalable UI on mobile devices.
Target device - Iphone X. It’s have resolution 2436x1125.
UI has horizontal mode with centered simmetry.
All mockups where done in psd in 2436x1125 and successfully integrated and aligned in project.
But then I noticed significant clipping from original resolution. It’s shown on attached file.
Those clipping is ruined all pixel perfect mockups for 2436x1125. UI was clipped somewhere around 2340 px by width and has broken center for simmetry.
Also it’s hard to debug on PC screen. Because you can’t get honest 2340 px from Iphone screenshot. Somehow they stretched back in 2436 px.
Even if I do all new mockups in 2340 , I can’t rely it will be perfectly aligned. Because on the screen of target device UI stretched to 2436 px. So you can’t find the right amount of pixels to move x,y coordinates on a canvas.
Then I found the lawsuit on Apple about cheating on Iphone X specifications.
It’s about pixel technology they used in Iphone X display. Look at second image in attach.
Overall I want to ask community to share some knowledge on how to develop scalable UI which will apply to actual display resolutions on mobile devices. And how to avoid re-straching of fonts and 2d-art from 2340px to 2436px on Iphone X.