ScrollView vs List horizontal padding based on iPhone screen size

In my app, most views use List for all tabs. However, due to a custom design, I switched one tab to use ScrollView. I quickly noticed that, unlike List, which applies default padding around the entire view and its items, ScrollView has no such built-in padding. Initially, I assumed that applying a simple .padding(.horizontal) would give the items in ScrollView the same padding as List, but that wasn’t the case.

It turns out List adjusts its padding based on screen size. For larger iPhones, like the Plus and Pro Max models, List uses 20px padding, whereas regular-sized iPhones (including the Pro) use 16px. This discrepancy creates an inconsistency when trying to replicate the same padding behavior with ScrollView.

Thus, my question how can I apply this conditional padding and/or if there's an API to get the value of the default padding used by List?

Also, there’s a difference in padding depending on whether you run the app in the simulator or on a physical device, even if both the simulator and the physical device are the same model and iOS version.

iPhone 13 iOS 17.4 Simulator:

iPhone 13 iOS 17.4 Physical device:

As you can see simulator for iPhone 13 has what I assume 20px paddings for List and List items. So the default padding applied to items in ScrollView is misaligned.

iPhone 15 Pro Max iOS 18.0 Physical device and Simulator:

In summary, it seems that simulators consistently apply 20px padding for List, while physical devices adjust between 20px and 16px based on screen size. Meanwhile, .padding(.horizontal) always applies 16px and doesn’t dynamically switch to 20px on larger screens.

Any thoughts how to work around this?

Code example:

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            ScrollView {
                ForEach(0..<50) { i in
                    Text("Item #\(i)")
                        .padding(.horizontal)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .background(.orange)
                        .padding(.horizontal)
                }
            }
            
            List {
                ForEach(0..<50) { i in
                    Text("Item #\(i)")
                        .background(.green)
                }
            }
           
        }
    }
}
ScrollView vs List horizontal padding based on iPhone screen size
 
 
Q