デバイスの文字サイズの設定によってデザインが崩れるのを防止する

例えばこんなのがあったとして

import SwiftUI

struct Hoge: View {
    var body: some View {
        content
            .padding(30)
    }
    
    var content: some View {
        VStack(alignment: .center, spacing: 20.0) {
            Text("ABCDEFGHIJKL".uppercased())
                .font(.largeTitle.width(.compressed))
                .fontWeight(.bold)
            Text("「蚊に刺されると、かゆみを感じるのは唾液が原因である」というのは、実は誤解。蚊が吸った血液を注入するための唾液が原因で、かゆみを引き起こす。")
                .multilineTextAlignment(.center)
                .foregroundColor(.secondary)
                .fontWeight(.medium)
            Button {
            } label: {
                Text("へ〜")
                    .padding(.all)
                    .frame(maxWidth: .infinity)
                    .background(.cyan)
                    .cornerRadius(10)
            }
        }
        .padding(30)
        .background(.blue)
        .cornerRadius(10)
        .frame(maxWidth: 500)
    }
}

struct Hoge_Previews: PreviewProvider {
    static var previews: some View {
        Hoge()
    }
}

通常の文字サイズではいい感じのレイアウトだけど、
設定で文字を大きくするとレイアウトが崩れたり、文字が見切れたりすることがある。

ちなみにこの画面はキャンバスの下の方のボタンから選択すれば表示できる。

XXX largeまではいい感じなので、それ以上大きくならないように、文字サイズを制限したい。

import SwiftUI

struct Hoge: View {
    var body: some View {
        content
            .padding(30)
            // こいつを追加
            .dynamicTypeSize(.xSmall ... .xxxLarge)
    }
    
    var content: some View {
        VStack(alignment: .center, spacing: 20.0) {
            Text("ABCDEFGHIJKL".uppercased())
                .font(.largeTitle.width(.compressed))
                .fontWeight(.bold)
            Text("「蚊に刺されると、かゆみを感じるのは唾液が原因である」というのは、実は誤解。蚊が吸った血液を注入するための唾液が原因で、かゆみを引き起こす。")
                .multilineTextAlignment(.center)
                .foregroundColor(.secondary)
                .fontWeight(.medium)
            Button {
            } label: {
                Text("へ〜")
                    .padding(.all)
                    .frame(maxWidth: .infinity)
                    .background(.cyan)
                    .cornerRadius(10)
            }
        }
        .padding(30)
        .background(.blue)
        .cornerRadius(10)
        .frame(maxWidth: 500)
    }
}

struct Hoge_Previews: PreviewProvider {
    static var previews: some View {
        Hoge()
    }
}

XXX Large以上の文字サイズになっていないことがわかる