Sites that are built to be responsive to width changes (such as www.readwrite.com) will respond differently in the desktop IE versus modern IE.
In the readwrite.com example, the site adapts to new browser widths on the desktop IE (and on the phone). However, it does not adapt correctly in the modern IE. This is especially troublesome because the modern IE is the one more likely to be "snapped" to a small width on the side of the screen.
I've been told that IE and Modern IE should render the same markup identically, but this is of course not the case in this situation. Sites cannot specifically detect that they are running in modern mode, but one CSS rule has been provided to alleviate the problem:
When this CSS rule is added, the site functions responsively inside the modern UI the same as it already did on desktop/phone.
Question: Is this desired operation? Are the two modes supposed to render markup differently? Why would phone/desktop adapt correctly, where modern cannot?
Is it up to sites to add this code? It seems we need an informational awareness campaign, because many sites (such as readwrite example here) would operate much more elegantly and support the Windows modern UI platform and users much better if this single CSS rule was added to their sites.
Given the lower user base of Windows tablets, many sites are not aware of this need. And users experience a bad experience because of it, resulting in poor perception of the Windows platform.
I would really hope for an update that solves the issue, by having modern IE render the same as desktop IE (which is supposed to already be the case, according to the developer instructions).
I have learned from IE Product Manager Ade Bateman, that this comes down to viewport scaling. Apparently desktop and modern IE use the same rendering but different scaling rules to provide "mobile style scaling" (the full page zoom-out that shows the whole page but is useless to read or use). That is only in modern IE. Desktop and Phone don't do that.
•this modern mode 'mobile style scaling' is breaking the web designer's actual intended scaling / responsive layout
•the designer's intended scaling / responsive layout already works on IE desktop / Chrome / Firefox / Android / iOS / Windows Phone
•Only modern mode IE causes the problem, on a device when the mobile responsive layout is most important
•The web designer can add an MS-specific CSS rule, but that requires extra work to support what should already work, and devs are reluctant to go out of their way to help IE's deficiencies.
•right, "right", or wrong: if you're doing something different and it breaks what works everywhere else (even on your own product's other devices/modes), you're breaking the web.
•And you're hurting Windows. Consumers pick up a Surface, and the only way to read some of the most popular websites in the world is to abandon the modern UI, and go to the desktop mouse-based browser -- on their tablet.