IE10 Responsive Layouts and Pointer Input Without Polyfills

You have a Windows 8 kiosk running Internet Explorer 10 and you need a layout that adapts to portrait and landscape and a drag interaction that works with mouse and touch on the same device. The useful takeaway is that IE10 gives you native CSS Media Queries and a unified pointer input model, but only under Microsoft prefixes and without conditional comments for branching. That means you can drop the HTML5 shiv and media-query polyfills for this browser, and you must write to -ms-pointer-* events instead of modern Pointer Events.

The IE10 baseline you can rely on

IE10 ships with native support for CSS3 Media Queries based on width, height, orientation and resolution. It also renders HTML5 semantic elements natively and supports the video and audio tags with limited codec support. Conditional comments were removed in IE10, so HTML-based branching like the old if-IE comments no longer works. Feature detection or user-agent sniffing must replace it.

Document mode matters. Enterprise Mode on Windows can force IE10 to render in an older mode, which disables the features you expect. A practical check is to read document.documentMode in the console on the target machine. A value of 10 indicates standards mode for IE10. If it is 9 or lower, media queries and pointer events will behave differently.

Media queries without a polyfill

Because IE10 understands @media, you can control layout with width breakpoints instead of JavaScript resizing. Support is solid for width and height but newer query features introduced after the IE10 era are not present.

<meta name="viewport" content="width=device-width, initial-scale=1">
/* base */
.panel { width: 100%; }
/* landscape tablets */
@media screen and (min-width: 768px) {
  .panel { width: 50%; }
}

To verify, open the page in IE10 and resize the viewport. Inspect computed styles for .panel to confirm the rule switches at the breakpoint. This check requires no special permissions, only access to the kiosk browser and dev tools.

Unified input with -ms-pointer-events

IE10 implements the Pointer Events model under Microsoft prefixes: -ms-pointer-events in CSS and MSPointerDown, MSPointerMove, MSPointerUp in JavaScript. This provides a single event stream for mouse, pen and touch, which predates the unprefixed standard.

CSS touch-action controls scrolling and zooming behavior. Setting -ms-touch-action:none on a draggable element prevents the browser from handling panning while you handle pointer moves yourself.

.draggable {
  -ms-touch-action: none;
  touch-action: none;
}

JavaScript wiring uses the prefixed names. A minimal handler attaches to MSPointerDown and tracks movement via MSPointerMove.

var el = document.getElementById('draggable');
el.addEventListener('MSPointerDown', function(e){
  if (el.setPointerCapture) { el.setPointerCapture(e.pointerId); }
});
el.addEventListener('MSPointerMove', function(e){
  // e.pointerType distinguishes mouse, pen and touch
  // update position from e.clientX / e.clientY
});

Verification is to create a test div with -ms-touch-action:none and attach an MSPointerDown handler. Trigger with mouse and with touch. The handler should fire for both input types in IE10 standards mode.

Trade-offs and limits

Pointer Events in IE10 lack some later spec features such as reliable pointer capture nuances and the full pointerType set. Code written for modern unprefixed Pointer Events will not run without an adapter.

Behavior can differ between Windows 8 in-box IE10 and Windows 7 with the IE10 update, and Enterprise Mode can emulate older document modes, changing feature availability. Media query support stops at the IE10 era, so features like prefers-color-scheme are unavailable.

Because conditional comments are gone, you cannot ship an IE-only stylesheet via HTML. Use feature detection for -ms-pointer-events support or serve a single stylesheet with prefixed rules.

Close by confirming documentMode is 10, using native media queries for responsive layout, and coding input with -ms-pointer-* events and -ms-touch-action. Keep a fallback path for environments forced into compatibility mode, and document the prefix dependency for future maintenance.