画面幅の注意 スマホアプリのWebView高さ再現 フロントエンド定例 2022/9/9

import SwiftUI
import WebKit

struct WebView: NSViewRepresentable {
  let url: URL

  func makeNSView(context: Context) -> WKWebView {
    let webView = WKWebView()
    webView.customUserAgent = "スマホアプリ用に変更 場合によってはheaderを変えるとかもありそう"

    return webView
  }

  func updateNSView(_ nsView: WKWebView, context: Context) {
    nsView.load(URLRequest(url: url))
  }
}

import SwiftUI
import WebKit

struct ContentView: View {
  @State private var url = "https://lancers.jp"

  var body: some View {
    TextField("URL", text: $url).padding(.top, 16.0)

    HStack {
      VStack {
        // CSS ピクセル 375x667
        Text("iPhone SE")

        if url.isEmpty {
          Text("URLの入力してください")
        } else {
          WebView(url: URL(string: url)!).frame(width: 375.0, height: 509.0)
        }
      }

      VStack {
        // CSS ピクセル 428x926
        Text("iPhone 13 Pro Max")

        if url.isEmpty {
          Text("URLの入力してください")
        } else {
          WebView(url: URL(string: url)!).frame(width: 428.0, height: 707.0)
        }
      }
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}