Update March 11, 2013: I was able to see a Surface for myself at Best Buy a couple days ago and discovered an issue. The album treeview was appearing at the top of the page with the rest of the content below it. This morning I updated the code again, but I still need someone to confirm that it’s fixed. Thanks!
Cut to the chase: I’m looking for someone with a Microsoft tablet (like a Surface) to look at the beta site and tell me whether you see a 3-pane layout like the first screenshot or a single pane like the second. Reply in the comments or send me an e-mail (roger *at* techinfosystems *dot* com). Read on for the full story.
Last week I found myself at a Microsoft store in Minneapolis with the family, so I took the opportunity to see how the beta site looked on a Surface. (Side note: I really should call it a CTP site, since the beta hasn’t yet been released. It’s very close, though.) The styling looked right, the MP4 videos played using the native HTML5 video tag, and the action was smooth and responsive. All great. But there was one problem. I couldn’t use my finger to grab the splitter bars to resize the left and right panes.
(This screenshot is from my desktop PC, not the Surface, but it looked the same.)
Instead of a three-pane view, touchscreen devices show the center pane full screen with the contents of the right pane appearing below the center content. For example, here is how an album looks on a touchscreen that is about 500 pixels wide:
That turns out to be pretty much the ideal behavior you would want on small touchscreens, since they don’t have sufficient width to justify panes anyway. But larger 10-inch tablets could benefit from the pane layout so the ultimate goal is still to make the splitter bar touch-capable so I can re-enable it on large tablets. But this will probably be after the v3 release.
After digging around, I found a different technique that supposedly works on MS tablets:
var isTouchScreen = !!('ontouchstart' in window) || !!navigator.msMaxTouchPoints;
I updated the beta site to use this code and confirmed it works as expected on the devices I have laying around, but I don’t have a MS tablet to test it on. So I ask you, Dear Reader, if you have a Microsoft tablet like a Surface, can you go to the beta site and tell me whether you see a 3-pane layout like the first screenshot or a single pane like the second. Thanks!