I am currently working on a WP8 application that utilizes the WebBrowser control to display images. My goal is to have the image width match the width of the phone exactly, but I am encountering some difficulties in achieving this.
My approach involves obtaining the screen width and scale factor in the code:
var initalWidth = Application.Current.Host.Content.ActualWidth;
var factor = Application.Current.Host.Content.ScaleFactor / 100.0;
var screenWidth = (initalWidth / factor).ToString();
I then pass the screenWidth value to the HTML loaded in the browser control in order to set the image width accordingly.
Upon testing, here are the findings for different devices:
Lumia 520
initial width= 480
factor = 1
screenWidth = 480
Desired Outcome: Image perfectly matches the width of the phone.
Lumia 920
initial width= 480
factor = 1.6
screenWidth = 300
Undesirable Result: Image falls short by about 80 pixels from fitting the screen.
The discrepancy between the two devices has raised questions regarding my implementation. I wonder if there's an error in my approach?
Within my HTML code, I have included:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
as well as
@-ms-viewport {
width: device-width;
}