Question 66974 in IOS Swift Question posted in
The official documentation can be found here.

How to make the webview in full screen – Ios swift

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search