How to make the webview in full screen-CodePudding

I have this code and I am trying to make the webview height to be a full screen

struct ContentView: View {
    @State private var showWebView = false
    private let urlString: String = "https://example"
    
    var body: some View {
        VStack(spacing: 40) {
            // Normal WebView
            WebView(url: URL(string: urlString)!).frame(height: 900)
                .cornerRadius(10)
                .shadow(color: .black.opacity(0.3), radius: 20.0, x: 5, y: 5)
        }
    }
}

I have tried to add to the height :

height: self.view.frame.height

but it didn't work

CodePudding user response：

You should just add .ignoresSafeArea() modifier to your WebView:

struct ContentView: View {
    @State private var showWebView = false
    private let urlString: String = "https://example"
    
    var body: some View {
        VStack(spacing: 40) {
            WebView(url: URL(string: urlString)!)
                .cornerRadius(10)
                .shadow(color: .black.opacity(0.3), radius: 20.0, x: 5, y: 5)
                .ignoresSafeArea()
        }
    }
}

Also you can remove corenerRadius() modifier, because in this case it's not necessary.

CodePudding user response：

To make a web view full screen with SwiftUI, you can use the .edgesIgnoringSafeArea(.all) modifier on the WebView object, like this:

WebView(url: url).edgesIgnoringSafeArea(.all)

This will make the web view occupy the entire screen, ignoring the safe area. The safe area is the part of the screen that is not obscured by the device's bezel or other device-specific elements. Ignoring the safe area will ensure that the web view takes up the maximum amount of space on the screen.

You can also use the .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity) modifier to achieve the same effect, like this:

   WebView(url: URL(string: urlString)!)
            .frame(
                minWidth: 0,
                maxWidth: .infinity,
                minHeight: 0,
                maxHeight: .infinity
            )

This will make the web view occupy the entire screen, regardless of the device's safe area.