Swift iOS : 装入webview时，如何让图片都显示在屏幕内

时间 2019-11-30

标签 swift ios 装入 webview 如何图片显示屏幕栏目 Swift 繁體版

原文原文链接

webview装入的网页，经常有幅面比较的图，这些图会超出手机的宽度，所以致使显示不完整。css

好比以下案例，加入了两个图片，大小分别为：html

650x300
150x150复制代码

在iPhone SE的模拟器下，默认状况下，前一张图会在宽度上超出，后一张能够显示完整。web

import UIKit
class Page: UIViewController{
    var c : UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        c = UIWebView()
        c.frame = super.view.frame
        view.addSubview(c)
        c.frame.origin.y += 20
        let html = "<img src=\"https://via.placeholder.com/650x300\"><img src=\"https://via.placeholder.com/150x150\">"
        let url = URL(string:"http://")
        c.loadHTMLString(html, baseURL: url)

    }
}
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        self.window = UIWindow(frame: UIScreen.main.bounds)
        self.window!.rootViewController = Page()
        self.window?.makeKeyAndVisible()
        return true
    }
}复制代码

想要更加优雅的适配图片，能够使用css，强制要求显示宽度为100%,从而缩放宽度到设备宽度。作法就是加入一个html头字符串，加入到你本身装入的html字符串的头部。如：bash

import UIKit
class Page: UIViewController{
    var c : UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        c = UIWebView()
        c.frame = super.view.frame
        view.addSubview(c)
        c.frame.origin.y += 20
        let html = htmlhead + "<img src=\"https://via.placeholder.com/650x300\"><img src=\"https://via.placeholder.com/150x150\">"
        let url = URL(string:"http://")
        c.loadHTMLString(html, baseURL: url)

    }
}
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        self.window = UIWindow(frame: UIScreen.main.bounds)
        self.window!.rootViewController = Page()
        self.window?.makeKeyAndVisible()
        return true
    }
}
let htmlhead =  "<!DOCTYPE html>" +
    "<html>" +
    "<head>" +
    "<meta charset=\"UTF-8\">" +
    "<style type=\"text/css\">" +
    "html{margin:0;padding:0;}" +
    "body {" +
    "margin: 0;" +
    "padding: 0;" +
    "}" +
    "img{" +
    "width: 90%;" +
    "height: auto;" +
    "display: block;" +
    "margin-left: auto;" +
    "margin-right: auto;" +
    "}" +
    "</style>" +
"</head>"复制代码

出来的效果，是两张图片所有充满宽度，其中一个图片缩小，不会产生锯齿，一个图片放大，有些锯齿。对于大量照片的html文档，通常都是缩小的，所以看起来仍是过得去的。app