iOS开发：能否实现WKWebView仅占屏幕一半显示网页？

完全可以用WKWebView实现你需要的半屏悬浮效果，它作为UIView的子类，支持自由调整尺寸和位置，完全适配你的需求；而SFSafariViewController因设计定位为全屏模态容器，确实不适合这类自定义布局。

核心实现步骤 #

• 自定义布局约束：通过Frame或AutoLayout直接限定WKWebView的尺寸，比如设置高度为屏幕的50%，或悬浮在屏幕任意区域
• 设置透明背景：让应用背景内容可见，需要同时配置WKWebView本身和加载的网页背景透明
• 添加到视图层级：将WKWebView加入当前视图，放在合适层级以保证原生UI元素正常展示

示例代码（Swift） #

import WebKit

class YourViewController: UIViewController, WKUIDelegate {
    private var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 配置WKWebView
        let webConfig = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfig)
        webView.uiDelegate = self
        view.addSubview(webView)
        
        // 用AutoLayout设置顶部半屏约束
        webView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            webView.topAnchor.constraint(equalTo: view.topAnchor),
            webView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5)
        ])
        
        // 设置WebView自身透明
        webView.backgroundColor = .clear
        webView.isOpaque = false
        
        // 注入脚本让网页背景透明（针对网页自带不透明背景的情况）
        let transparentScript = WKUserScript(
            source: "document.body.style.backgroundColor = 'transparent';",
            injectionTime: .atDocumentEnd,
            forMainFrameOnly: true
        )
        webConfig.userContentController.addUserScript(transparentScript)
        
        // 加载目标网页
        if let url = URL(string: "https://your-target-url.com") {
            webView.load(URLRequest(url: url))
        }
    }
}

关键说明 #

• WKWebView的灵活性完全支持这类部分屏幕展示的场景，苹果官方提到的“展示完整或部分网页内容”正是指这种自定义布局能力
• 若网页本身设置了不透明背景，必须通过注入WKUserScript的方式修改网页样式，否则WebView的透明设置会被网页覆盖
• SFSafariViewController属于系统级浏览器组件，苹果不允许对其进行非标准布局修改，强行调整可能引发审核问题，因此WKWebView是最优选择

内容的提问来源于stack exchange，提问作者segol234