How to resize a Maxpreps HTML widget to fit the UIWebView?

Question

I am trying to use the Maxpreps widget (http://www.maxpreps.com/widgets/createwidget.aspx) in my app to show school sports updates. I made a html file in xcode and pasted the code provided from Maxpreps. I created a webview and used the code on the view controller.

    @IBOutlet weak var sportsTest: UIWebView!

    sportsTest,loadRequest(NSURLRequest(URL: NSURL(fileURLWWithPath: NSBundle.mainBundle().pathForResource("widgetcode", ofType: "html")!)))

The problem is when the code is being shown it wont fit the UIWebView properly.

chrono42 · Accepted Answer · 2016-01-03T21:43:29.570

The issue you are having with the HTML not fitting in the UIWebView is not simple to resolve, but I can give you a hack that will get your content on the screen.

The problem is that the web page from Maxpreps loaded from the URL in their widget isn't designed to fit completely on an iPhone in portrait orientation. However it is a responsive HTML page so that is the good news.

First, you don't need to load the script tag or write an HTML file since all that gives you is a link that you need to click, right? You don't want that link, you want the content of what is behind the link, right? Hopefully!

This view controller implementation should work fine:

import UIKit

class ViewController: UIViewController {

    @IBOutlet var webView: UIWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // This will force the UIWebView to downscale and fit your page, but
        // it is hacky because 91% of original size might not always be the
        // right amount.  This is why I said it is hard.
        self.webView.scrollView.minimumZoomScale = 0.3
        self.webView.scrollView.maximumZoomScale = 2.0
        self.webView.scrollView.setZoomScale(0.91, animated: false)
    }

    override func viewWillAppear(animated: Bool) {
        if let url = NSURL(string: "http://www.maxpreps.com/local/team/home.aspx?gendersport=boys,baseball&schoolid=45823724-55bc-4d89-926b-b1974b3d8e36") {
            let request = NSURLRequest(URL: url)
            webView.loadRequest(request)
        }
        else {
            println("Failed to create URL")
        }
    }
}

The above works, but better solutions IMHO would be to:

1) Ask Maxpreps to fix their responsive HTML page so that it renders on an iPhone in portrait orientation

2) Ditch HTML altogether and query the information you need using a REST API if they make one available, and then write a native non-HTML screen

3) Attempt to get a dynamic scaling solution in place that works. These are prone to failure based on my experience

Here is what I see on my simulator when I run it: Another example:

Here is a Stackoverflow post on people trying to autoscale based on bounds to scrollview size but this is not reliable in my experimenting: http://stackoverflow.com/questions/1511707/uiwebview-does-not-scale-content-to-fit — chrono42, Jan 03 '16 at 21:19

How to resize a Maxpreps HTML widget to fit the UIWebView?

1 Answers1