Viewport Issues

Question

Why is my viewport dimensions 3413x1985 using Edge in Community Visual Studio instead of 2560x1489 which is the correct one. Visual Studio developers don't believe it's their issue. This is easily demonstrated with a very simple web file base program. It's a quite serious problem as it inhibits knowing what the project will really look like when published.

Answer 1

@Al Sardello ,
Do you mean when you try to run your web app from Visual Studio then you are getting an incorrect result for the MS Edge browser?
If yes, please try to provide your sample code to check for the issue.
Let us know, which version of the Visual Studio and the Edge browser you are using for making this test?
please correct me, if I am misunderstanding the issue and try to provide detailed information that may help us to understand the issue in a better way.

----------

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

@Deepak-8793

Your understanding is absolutely correct. What follows is a description of some work and outcomes.

Trying to provide the simplest sample code, I began by building the website anew; that is, starting with a blank project I started adding each page of the published website to the "new" website inside VS. I also added the javascript that reads the viewport dimensions to each of these pages. It turned out that some pages showed the correct (2560x1489) viewport dimensions and some didn't showing 3413x1985. There were no apparent differences as they are all simple html pages loading the same css, js.

Then, having started the process of adding Edge as a VS extension, got the idea of trying the website using the Beta Edge which was downloaded and installed as step one in this process and voila! All is good; that is, every page rendered inside VS using the Edge Beta is exactly the same as the published web site for all pages.

Relevant specs are:

The production Edge: Microsoft Edge is up to date.
Version 86.0.622.38 (Official build) (64-bit)

The beta Edge: Microsoft Edge is up to date.
Version 86.0.622.38 (Official build) beta (64-bit)

Visual Studio: Microsoft Visual Studio Community 2019
Version 16.7.5

Given this, I'm not sure how to proceed. The Beta version inside VS works consistently while the current Edge inside VS does not so is it safe to assume Beta has the "solution"?

Answer 3

Sorry for the confusion regarding the Edge extension. I only got through step 1 of adding the extension which makes the Edge Beta available in the Browse With window of VS. So if I simply use the Web Browser (Microsoft Edge) I get the 3413x1985 viewport whereas if I Browse With Edge Beta I get the proper viewport size 2560x1489. I have now a VS solution that, for me, demonstrates the problem but I'm not sure how to share the code as attachments are limited.

Thanks for your continued interest - I hope it isn't wasting your time.

Answer 4

@Deepak-8793

I have put a relatively simple solution that demonstrates the problem in OneDrive. This link https://1drv.ms/f/s!AgtB2u25sm0ZiNJBYJCVNsLjyXECsg should get you to it. You will also find two screen shots, the first using Edge within VS show the large viewport dimensions, the second using Edge Beta within VS showing the correct viewport size.

Not being barely a novice webber, you may well find HTML issues.

Hope this helps.

Regards,
Al