iOS9 MobileSafari Viewport Problem

CQe0DfnUwAAqdG7

The viewport is set incorrectly when the viewport meta tag is specified with initial-scale=1 or width=device-width, and the page contains an element (e.g. div tag) that is wider than the desired viewport’s boundary.

In the screenshot above (courtesy @RWD) you can see that the off-screen menu actually appears on-screen in iOS9. Apple changed how iOS9 responds to width=device-width as it, according to them, got abused too much.

To fix this, append shrink-to-fit=no to your viewport meta tag, as such:

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

Debugging iOS Safari and UIWebViews using Chrome DevTools

ios-debug-using-chrome-devtools

The ios_webkit_debug_proxy allows developers to inspect MobileSafari and UIWebViews on real and simulated iOS devices via the DevTools UI and WebKit Remote Debugging Protocol. DevTools requests are translated into Apple’s Remote Web Inspector service calls.

The proxy detects when iOS devices are attached/removed and provides the current device list on http://localhost:9221. A developer can click on a device’s link (e.g. http://localhost:9222) to list that device’s open tabs, then click on a tab link (e.g. http://localhost:9222/devtools/page/1) to inspect that tab in their browser’s DevTools UI.

iOS WebKit Debug Proxy →
How to investigate IOS Safari crashes using Chrome →

Their missing Mile-High Menus and Magic Corners : Fitts’ Law vs. Apple on Windows

safari.jpgWhen using software Fitts’ Lawa model of human movement, predicting the time required to rapidly move from a starting position to a final target area, as a function of the distance to the target and the size of the target – is in effect all the time. Microsoft understands the importance of this but Apple apparently doesn’t, at least not on Windows …

Continue reading “Their missing Mile-High Menus and Magic Corners : Fitts’ Law vs. Apple on Windows”