How to fit the HTML content to the web browser in Windows Phone 7

问题

I am trying to resize the browser with the size of html content. I have try with following code.

private void WebBrowser_OnLoaded(object sender, RoutedEventArgs e)
{
    String htmlHead = "<html><head><meta charset='UTF-8'/><meta name=\"viewport\" content=\"width='480', initial-scale='1'\"/>{0}</head><body onload=\"ResizeWebBrowser()\"><center>{1}</center></body></html>";
    myWebView.NavigateToString(String.Format(htmlHead, getScript(), getHTMLContent()));
    myWebView.IsScriptEnabled = true;
    myWebView.ScriptNotify += new EventHandler<NotifyEventArgs>(WebBrowser_ScriptNotify);
}

private void WebBrowser_ScriptNotify(object sender, NotifyEventArgs e)
{
    if (!string.IsNullOrEmpty(e.Value) && !(e.Value == ""))
    {
        this.myWebView.Height = double.Parse(JsonParsing(e.Value));
        myWebView.UpdateLayout();
    }
}

private string getScript()
{
    string script = "<script>";
    script += "function ResizeWebBrowser()";
    script += "{";
    script += "var _renderedHeight=document.body.firstChild.offsetHeight * 0.66;";
    script += "var _json = '{\"rendered_height\" : '+_renderedHeight+'}';";
    script += "window.external.notify(_json)";
    script += "}";
    script += "ResizeWebBrowser();";
    script += "</script>";
    return script;
}

public string getHTMLContent()
{
    StringBuilder htmlBody = new StringBuilder();
    htmlBody.Append("<table cellpadding=\"0\" cellspacing=\"0\" width=\"704\" height=\"484\" background=\"https://known.com/img/back/123456.jpg\" style=\"background-repeat: no-repeat; background-position: center;\">");
    htmlBody.Append("<tr>");
    htmlBody.Append("<td valign=top>");
    htmlBody.Append("<div style=\"position: absolute;\">");
    htmlBody.Append("<div style=\"position: absolute; display: table; width: 132px; height: 132px; top: 44px; left: 44px; z-index:0;\">");
    htmlBody.Append("<img src=\"https://known.com/img/icon/87654.jpg\" width=\"100%\" height=\"100%\"/>");
    htmlBody.Append("</div>");
    htmlBody.Append("<div style=\"position: absolute; display: table; width: 704px; height: 484px; top: 0px; left: 0px; z-index:0; \">");
    htmlBody.Append("<img src=\"https://known.com/img/icon/234255.jpg\" width=\"100%\" height=\"100%\"/>");
    htmlBody.Append("</div>");
    htmlBody.Append("<div style=\"position: absolute; display: table; width: 440px; height: 264px; top: 184px; left: 184px; z-index:0;  font-family:times;  font-size:14px;  color:#FFFFFF; \" align=\"center\">");
    htmlBody.Append("<div style=\"display: table-cell;vertical-align: middle;\">");
    htmlBody.Append("</div>");
    htmlBody.Append("</div>");
    htmlBody.Append("</div>");
    htmlBody.Append("</td>");
    htmlBody.Append("</tr>");
    htmlBody.Append("</table>");
    return htmlBody.ToString();
}

Now I can resize the browser. But now I am facing one problem. That is, the content is exceed from the browser. If I double click the page, then only the the content become to fit to the browser. Please let me know any way to fit the content to the browser.

Please click here to get my sample project

来源：https://stackoverflow.com/questions/28185198/how-to-fit-the-html-content-to-the-web-browser-in-windows-phone-7

标签

javascript

html

windows-phone-7