UWPアプリケーション内のXAML-WebViewコントロールにズームフィット機能を実装しようとしています。 semi-official solution for zoomingがJavaScriptを使用しているようだから、私のアプローチはbody要素のCSSプロパティを動的に設定することでした。UWP WebViewに収まるようにコンテンツを拡大する
ここで、正しいズーム係数を見つけることです。
ドキュメントによれば、WebViewはドキュメントモードでエッジブラウザを使用します。
しかし、エッジでは、ウィンドウサイズとズーム率に関係なく、document.body.clientWidthプロパティが常にドキュメントの幅を返すことがわかりました。したがって、私はこれがIE11は、エッジに、また、例えばクロムのような他のブラウザ、Iは、試験した基本的にすべてのブラウザの範囲内で、IE10原稿モードに設定デスクトップで動作
document.body.style.zoom = (window.innerWidth * 100/document.body.clientWidth) + '%'
を使用してズーム倍率を設定します。ただし、Windows 10 UWPアプリケーションでEdgeを使用すると思われるWebView -controlでは動作しません（アップデートのためにJay Zuoに感謝）。
問題がWebView制御において、document.body.clientWidthは、一度常に、設定window.innerWidthと同じであることがあるので、結果として得られるズーム倍率は常に間違っている100%であること。私は、ユーザーがウィンドウのサイズを変更するたびに、表示されたページのサイズを変更したいと思います。
WebViewコントロールで、好ましい文書幅を取得するためにどのような代替プロパティを使用できるのかを知っていますか？
編集：私はズームインしたいウェブページの最小の例は以下の通りです：
demo.html：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
</div>
</body>
</html>
のstyle.css：
@charset "utf-8";
body {
background-color: #FFF;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow: hidden;
width: 102px;
height: 76px;
}
#container {
position: relative;
width: 102px;
height: 76px;
padding-top: 0px;
background-color: blue;
background-size: 102px;
background-repeat: no-repeat;
}
このWebページは、 eボックス。そのボックスをズームする方法、つまり、青い枠が画面いっぱいになるようにズーム率を設定する方法があります。しかし、このページでは、ウィンドウのサイズに関係なく、Edgeはbody.clientWidth=102を返すため、ズーム係数を正しく計算する必要があります。
UWPアプリケーションでは、WebViewはMicrosoft Edgeレンダリングエンジンを使用してHTMLコンテンツを表示します。詳細については、[WebViewクラス]の**備考**（https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.aspx）を参照してください。 ** Windows 10用にコンパイルされたアプリケーションでは、WebViewはMicrosoft Edgeレンダリングエンジンを使用してHTMLコンテンツを表示します。 Windows 8またはWindows 8.1用にコンパイルされたアプリケーションでは、WebViewはドキュメントモードでInternet Explorer 11を使用します。** –
@ JayZuo-MSFT情報をありがとうございます。しかし、Edgeでは 'document.body.clientWidth'はウィンドウのサイズではなくhtmlページの推奨サイズを返します。 – Georg
...これは、上で説明したアプローチがEdgeでは機能しますが、WebViewでは機能しないことを意味します。 – Georg