Website Displaying Mobile View in Microsoft Edge (Desktop/Laptop)

Overview

Some users may notice that the website displays the mobile navigation (hamburger menu) instead of the full desktop navigation while using Microsoft Edge on a desktop device.

This is a known behaviour related to how Microsoft Edge renders its browser window and calculates the visible viewport width.

Issue Description

Our website is configured to switch to the mobile layout when the browser width falls below 1280px.

In Microsoft Edge, even when the browser window appears to be set to 1280px wide, the site may still load the mobile layout. This occurs because Edge adds a small internal border (or frame) around the browser window. While this border is visually minimal, it slightly reduces the usable viewport width available to the website.

As a result:

• The effective viewport width becomes slightly less than 1280px.

• The website’s responsive breakpoint is triggered.

• The mobile navigation is displayed instead of the full desktop menu.

This can make it appear as though the site is not rendering correctly, when in fact it is responding correctly to the calculated viewport width.

Microsoft has discussed this browser border behaviour here:
https://learn.microsoft.com/en-us/answers/questions/2407109/how-to-remove-new-border-from-edge

Why This Happens

Responsive websites rely on CSS media queries to determine when to switch between desktop and mobile layouts.

For this website:

• Desktop layout: 1280px and above

• Mobile layout: Below 1280px

Although Edge may report a window size of 1280px, the added browser frame slightly reduces the internal rendering area. This causes the website to detect a width under 1280px and switch to the mobile version.

This behaviour is specific to how Edge handles its window rendering and is not caused by a defect in the website itself.

Permanent Resolution (CSS Media Query Adjustment)

If this behaviour continues to impact users, the responsive breakpoint can be adjusted within Showoff or directly within the website’s CSS.

Currently, the site switches to the mobile layout at:

@media (max-width: 1280px)

Because Microsoft Edge slightly reduces the effective viewport width due to its internal browser border, the site may interpret a 1280px window as being slightly under the breakpoint threshold.

To address this, the media query breakpoint can be lowered (for example, to 1260px or 1240px). This would prevent Edge’s internal border from triggering the mobile layout and ensure Edge users continue to see the full desktop navigation when their screen resolution is 1280px.

Important Considerations

• Media query changes apply to all browsers, not just Edge.

• Adjusting the breakpoint will affect the responsive behaviour site-wide.

• Users on smaller desktop screens may continue to see the desktop layout at widths where the mobile layout would previously have appeared.

• Full cross-browser and cross-resolution testing should be carried out after implementing any change.

While modifying the CSS breakpoint will resolve the issue for Edge users, the change must be carefully assessed to maintain a consistent experience across all devices and browsers.