Rotating webbrowser from current orientation is stretching(zooming) the webbrowser contents Windows phone

问题

I have a webbrowser which is in portrait mode. I am loading the webbrowser using

this.webBrowserControl.Source = new Uri("http://google.com");

When the content is loaded the view looks like this

there is rotate button provided, so if user is in portrait mode and user presses rotate button then I am rotating the webview using transform and setting its height and width so that it can occupy the whole screen

pageWidth = 480;
pageHeight = 800;
RotateTransform transform = new RotateTransform();
transform.Angle = 90;
this.webbrowser.RenderTransform = transform;
webbrowser.Width = pageHeight;
webbrowser.Height = pageWidth;

The webbrowser is rotated but the contents looks like zoomed or stretched, it lo

oks like this

Any idea how not to zoom the content??

回答1:

Edit:

Change Zoom percentage:

// figure out the ratio you want to reduce by
string zoom_js = "document.body.style.zoom=\"50%\";";

try
{
    this.myBrowser.IsScriptEnabled = true;
    this.myBrowser.InvokeScript("eval", zoom_js);
}
catch(Exception ex)
{
}

---

It is not zooming anything. It just that you are rotating it then stretching (resizing) the container.

Given your resolution, you have to have keep the aspect ratio if you don't want any stretching to be done.

<phone:WebBrowser x:Name="myBrowser" RenderTransformOrigin="0.5,0.5" Height="480" Width="480" Margin="0" Padding="0">
        <phone:WebBrowser.RenderTransform>
            <CompositeTransform Rotation="90"/>
        </phone:WebBrowser.RenderTransform>
    </phone:WebBrowser>
</Border>

Now that won't be stretched but it also not cover the entire screen. Now, imagine stretching the container like you did. The result will be your image you posted.

来源：https://stackoverflow.com/questions/27378319/rotating-webbrowser-from-current-orientation-is-stretchingzooming-the-webbrows