Swift UI: App looks different in simulator than on same iPhone model

Question

import SwiftUI

struct ReviewsPageView: View {
    @State private var showingSquare = false
    var data = ProfileData.getPreviewData()
    @State var totalRating = 0.0
    @State var numReviews = 40
    @State var star5: Double = 0.0
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    var colors = AppData.getData()
    
    var body: some View {
        ZStack {
            ZStack{
                VStack{
                    LinearGradient(gradient: Gradient(colors: [colors.bright, colors.mid]), startPoint: .topLeading, endPoint: .bottomTrailing)
                        .frame(width: 500, height: 800)
                        .ignoresSafeArea()

                    Spacer()
                }
                
            }
            
            
            VStack {
                HStack{
                    Button(action: {
                        self.presentationMode.wrappedValue.dismiss()
                    }, label: {
                        Image(systemName: "arrow.left")
                            .foregroundColor(.white)
                            .font(.title2)
                    })
                    
                    Spacer()
                    Text("REVIEWS")
                        .foregroundColor(.white)
                        .font(.headline)
                        .fontWeight(.semibold)
                    Spacer()
                    Image(systemName: "gearshape")
                        .foregroundColor(.white)
                        .font(.title2)
                }.frame(width: 400)
                    .padding(.bottom, -5)
                ScrollView {
                    
                    ZStack {
                        Circle()
                            .foregroundColor(.white)
                            .frame(width: 5000)
                            .offset(x: 0, y: 25)
                        VStack{
                            
                            
                            
                            Text("\(String(format: "%.1f",totalRating))")
                                .fontWeight(.black)
                                .font(Font.custom(data.font, size: 80))
                                .padding(.top, 40)
                               
                        
                            HStack(spacing: 0){
                                ForEach(0..<Int(totalRating / 1), id: \.self){ _ in
                                    Star(corners: 5, smoothness: 0.38)
                                        .fill(Color.yellow)
                                        .frame(width: 55, height: 55)
                                        .shadow(radius: 1, x: -0.5, y: 1)
                                }
                                ZStack{
                                    Star(corners: 5, smoothness: 0.38)
                                        .fill(Color.gray)
                                        .frame(width: 55, height: 55)
                                    Star(corners: 5, smoothness: 0.38)
                                        .fill(Color.yellow)
                                        .frame(width: 55, height: 55)
                                        .shadow(radius: 1, x: -0.5, y: 1)
                                        .overlay(
                                            HStack{
                                                Spacer()
                                                Rectangle()
                                                    .foregroundColor(.white)
                                                
                                                    .frame(width: CGFloat(35 - (totalRating.truncatingRemainder(dividingBy: 1.0)) * 35), height: 55)
                                                    .padding(.trailing, 1)
                                            }
                                        )
                                    
                                    
                                }
                                ForEach(0..<4 - Int(totalRating / 1), id: \.self){ _ in
                                    Star(corners: 5, smoothness: 0.38)
                                        .fill(Color.gray)
                                        .frame(width: 55, height: 55)
                                        .shadow(radius: 1, x: -0.5, y: 1)
                                        .opacity(0)
                                    
                                }
                                
                            }.padding(.top, -30)
                                .scaleEffect(0.9)
                            Text("based on \(numReviews) reviews")
                                .fontWeight(.light)
                                .font(Font.custom(data.font, size: 20))
                                .padding(.bottom, 15)
                                .frame(width: 300)
                                .foregroundColor(Color("gray"))
                            
                            HStack{
                                Text("Excellent")
                                    .font(Font.custom(data.font, size: 17))
                                    .fontWeight(.light)
                                    .foregroundColor(.black)
                                    .padding(.bottom, 5)
                                    
                                Spacer()
                                ProgressView(value: Double(data.reviewNumbers[4]) / Double(numReviews) * 100, total: 100.0)
                                    .progressViewStyle(LinearProgressViewStyle(tint: Color.green))
                                    .frame(width: 250)
               
                                    .scaleEffect(x: 1, y: 2, anchor: .bottom)
                            }.frame(width: 375)
                                .padding(.bottom, -10)
                            VStack{
                            HStack{
                                Text("Good")
                                    .font(Font.custom(data.font, size: 17))
                                    .fontWeight(.light)
                                    .foregroundColor(.black)
                                    .padding(.bottom, 5)
                                    
                                    .multilineTextAlignment(.leading)
                                Spacer()
                                ProgressView(value: Double(data.reviewNumbers[3]) / Double(numReviews) * 100, total: 100.0)
                                    .progressViewStyle(LinearProgressViewStyle(tint: Color("lime")))
                                    .frame(width: 250)

                                    .scaleEffect(x: 1, y: 2, anchor: .bottom)
                            }.frame(width: 375) .padding(.bottom, -10)
                            HStack{
                                Text("Average")
                                    .font(Font.custom(data.font, size: 17))
                                    .fontWeight(.light)
                                    .foregroundColor(.black)
                                    .padding(.bottom, 5)
                                    
                                    .multilineTextAlignment(.leading)
                                Spacer()
                                ProgressView(value: Double(data.reviewNumbers[2]) / Double(numReviews) * 100, total: 100.0)
                                    .progressViewStyle(LinearProgressViewStyle(tint: Color.yellow))
                                    .frame(width: 250)
               
                                    .scaleEffect(x: 1, y: 2, anchor: .bottom)
                            }.frame(width: 375)
                                .padding(.bottom, -10)
                            HStack{
                                Text("Below Average")
                                    .font(Font.custom(data.font, size: 17))
                                    .fontWeight(.light)
                                    .foregroundColor(.black)
                                    .padding(.bottom, 5)
                                    
                                    .multilineTextAlignment(.leading)
                                Spacer()
                                ProgressView(value: Double(data.reviewNumbers[1]) / Double(numReviews) * 100, total: 100.0)
                                    .progressViewStyle(LinearProgressViewStyle(tint: Color.orange))
                                    .frame(width: 250)
                                    
                                    .scaleEffect(x: 1, y: 2, anchor: .bottom)
                            }.frame(width: 375) .padding(.bottom, -10)
                            HStack{
                                Text("Poor")
                                    .font(Font.custom(data.font, size: 17))
                                    .fontWeight(.light)
                                    .foregroundColor(.black)
                                    .padding(.bottom, 5)
                                    
                                    .multilineTextAlignment(.leading)
                                Spacer()
                                ProgressView(value: Double(data.reviewNumbers[0]) / Double(numReviews) * 100, total: 100.0)
                                    .progressViewStyle(LinearProgressViewStyle(tint: Color.red))
                                    .frame(width: 250)

                                    .scaleEffect(x: 1, y: 2, anchor: .bottom)
                            }.frame(width: 375) .padding(.bottom, -10)
                            }
                            // ProgressView(value: CGFloat(data.reviewNumbers[0] / numReviews))
                            // ProgressView("", value: Double(data.reviewNumbers[0] / numReviews), total: 100)
                            Rectangle()
                                .frame(width: 375, height: 1)
                                .foregroundColor(Color("text"))
                                .padding(.top, 20)
                            
                            VStack {
                                Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
                                Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
                                Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
                                Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
                                Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
                                Review(reviews: [ReviewData(name: "Joan Perkins", image: UIImage(imageLiteralResourceName: "doctor"), rating: 5, time: "1627060557", review: "This is a great doctor. Fixed my issue")])
                            }
                            
                            
                            Spacer()
                        }
                    }
                }
            }
           
        }.onAppear{
            numReviews = data.reviewNumbers.reduce(0, +)
            totalRating = Double(Double(1*data.reviewNumbers[0] + 2*data.reviewNumbers[1] + 3*data.reviewNumbers[2] + 4*data.reviewNumbers[3] + 5*data.reviewNumbers[4]) / 500.0)
            //totalRating = 3.5
            
        }
        
        
        .navigationBarHidden(true)
    }
}

struct ReviewsPageView_Previews: PreviewProvider {
    static var previews: some View {
        ReviewsPageView()
    }
}

Here is my code ^ ^ ^

When I run the code in the iPhone 11 Xcode simulator it looks great. Here is a picture:

https://i.sstatic.net/IoQNY.png

When I run the code on my iPhone 11 it looks awful. Here is a picture of that:

https://i.sstatic.net/T98i0.png

Some text doesn't show. Buttons get cut off. Everything is larger than it should be. Why is this happening?

I am running the code on an IPHONE 11, and in the simulator I also run it on an IPHONE 11, so I don't understand why there would be a problem.

Any help would be greatly appreciated, thank you!

Answer 1

You are using all sorts of hardcoded values:

.frame(width: 400)
.frame(width: 375)
.frame(width: 375) .padding(.bottom, -10)

Not all phones have a width of 375 or 400 points. Remove these and let SwiftUI figure it out! For example, if you want to have something take up the entire screen width, try:

.frame(maxWidth: .infinity)