I'm working on a mobile game and I have some very specific scaling concepts in mind, but I've literally been fighting with anchors and window scaling settings for months now. I currently have the stretch settings set as canvas_items and expand.
The first image shows the game in a tablet resolution or roughly 4:3, and I have the scene root control node anchored to the full rect of the viewport. So why does everything run off to the right when I scale the window down on the y-axis (to simulate a mobile phone's screen size) in the second image? I just want it to encompass the whole screen while maintaining individual canvas items' aspect ratios and not have any of the gray default background showing.
Also what's up with all the text objects becoming super blurry when scaled down like this?

Tablet:

"Phone":

    antioxidant Also what's up with all the text objects becoming super blurry when scaled down like this?

    It's because you're effectively down-scaling your resolution. Your text is set up to look good at the resolution you're developing it in. When you scale down the y-axis of the window on your computer, it is reducing the resolution in both dimensions in order to maintain aspect ratios.

    On mobile devices, usually wider aspect ratios also come with higher resolution. For proper visual testing, you should be increasing the X-scale of your window rather than reducing the Y-scale.

    You never want to actually down-scale your UI if you can help it - that leads to blurriness. Your UI should change position but not size or shape when the resolution changes. If a size change is warranted, for instance if you are supporting a very diverse range of resolutions, consider deliberately changing the asset or the font size if you detect a resolution beyond a certain threshold.

      As to your overall issues, I made a little demo project that hopefully should help you. There is no code, just some project settings and the scene tree.

      ui-scale.zip
      4MB

      (Please note that I do not have rights to the background image, so please do not reuse it. This is just an example.)

      Generally for mobile dev, the direction you want to expand or shrink is the longer dimension. That will be X in landscape or Y in portrait. This is because that is the dimension with the most variance, both in aspect and in resolution. When testing landscape, rather than squishing down the window in Y, extending the window in X will give you a better approximation of how it will look on wider devices.

        4 days later

        award forgot to get back to this thread for a moment but thank you for taking the time and effort to explain things alongside some practical proof!
        When building UI elements I always try to go back and forth between 1920x1440 and 1920x1080 to test the average tablet and mobile resolutions and how everything behaves. The problem is my project has a high level of stylization and I want certain things to scale differently from others, hence the endless fight with trying to get control nodes to obey.
        First of all, the veering to the right I mentioned in the original post was due to a Camera2D node I forgot to delete (oops) which overrode the viewport's coordinates.
        As for the crusty labels / text objects, how should I go about preventing them from becoming mush when scaling? I can manually increase font sizes to a level where they'll look alright even on mobile but I'd like the runtime viewport to match what I'm seeing in the editor. Though I'm aware this might just be how canvas_items scaling inherently works