iPhone X / Samsung Galaxy S8 aspect ratio issues for cocos2dx games

Might be a bit late for you, but I think I've solved this issue. I used ResolutionPolicy::NO_BORDER, a design resolution of 1080x1920 and this guide image

The green area is 1080x1920. You should design your app to fit within this area. Taller phones such as the S8 and iPhoneX will expand up into the orange space. Wider devices such as tablets will expand into the orange space on the left and right.

What you need to do on launch is to calculate a scale factor for the Director to use.

Do this in your AppDelegate.cpp

auto frameSize = glview->getFrameSize();
float deviceAspectRatio = frameSize.height / frameSize.width;
float designAspectRatio = designResolutionSize.height / designResolutionSize.width;
director->setContentScaleFactor(MAX(
        deviceAspectRatio / designAspectRatio,
        designAspectRatio / deviceAspectRatio)
);

To be honest I'm not 100% on why this works. I discovered it by trying random scale factors until I found one that worked, and then trying to work backwards to come up with some math that will work. Turns out dividing the aspect ratio of the device by the aspect ratio of your design resolution is what you want.

Sadly I don't see any magic solution. Here are the different options:

• Test the screen ratio, and for iPhone X and Galaxy S8, switch resolution policy to ResolutionPolicy::SHOW_ALL instead of ResolutionPolicy::NO_BORDER. That's a quick-and-dirty solution, which will display black borders on left and right. You can improve this solution a little bit by scaling all content so that the important area takes all screen height.
• Change the width of your design resolution, offset the content, and find a way to fill all this resolution with your background textures. This requires more effort but most of the content should not change, except for the offset. It will solve the problem because a larger design resolution means that it has less to cut vertically (which is the problem in your case).
• As you said, you can also redesign the important area so that it is more flexible to different ratios. This requires some effort and reduces the size of this important area, which affects the experience on the other ratios.

I would go with the second option. Hope this helps, and sorry for not having a magic solution to that problem.