Viewport on the iPad Mini: The Numbers & Beyond...

Matt Brubeck at Mozilla mobile shed some light on viewport issues on the iPad Mini for me. Here's his insights.

  1. @mbrubeck @lukew Note: I implemented meta viewport support in mobile Firefox so I am quite familiar with these issues. :)
  2. @lukew The math: iPad mini is 4.75"*6:32" while Nexus 7 is 3.75"*6.01". 768px/4.75" = 162ppi on iPad mini; 603px/3.75" = 161ppi on Nexus 7.
  3. @lukew Note that 1/162" is also the size of 1 CSS px on iPhones, so a 50px button is the same physical size on iPhone, N7, and iPad Mini.
  4. @mbrubeck both are 7inch screens, w/ comparable ppi. yes? one uses 603 the other 768 for viewport yes? this results in a notable diff...
  5. @lukew Comparing diagonal size is very misleading on devices w/ different aspect ratios. Mini is 12% longer diag. but 28% wider in portrait.
  6. @lukew I think 1dppx is an ok choice for iPad mini, but maybe more suited for close viewing (like phones) than lap viewing (like big iPad).
  7. @mbrubeck maybe i'm being dense but how can a 10" screen and a 7" screen have the same choice be ok?
  8. @lukew It's really closer to 8 and 10". They are suited for different postures and/or users; e.g. more older users may prefer big iPads.
  9. @mbrubeck still between 8 & 10 is a big gap. Not convinced the postures are different. 600 (nexus), 533 (fire HD) work better imho
  10. @lukew Android and desktop have offered these choices for a long time; it's newer to the iOS ecosystem (but even there, see iPhone vs iPad).
  11. @lukew iPhone 3G has the same density and pixel ratio. Fonts that work there will work on iPad mini. Anyway the UA ultimately has control.
  12. @mbrubeck heh, can't serve the 320 styles to a 768 screen. And therein lies the rub!
  13. @mbrubeck @lukew By that I mean that this is the web, not print; at some point you must accept browsers will display pages differently.
  14. @mbrubeck of course! that's whole point. view this: http://www.lukew.com/ff/entry.asp?1663 on a myriad of devices.fully support different design/device.
  15. @mbrubeck but i want sensible, best possible designs everywhere.

Did you find this story interesting? Be the first to or comment.

Liked!

Luke Wroblewski

Digital product design & strategy guy in Silicon Valley, CA. Author of Web Form Design & Site Seeing. Currently CPO and co-founder of Bagcheck.

Total views
907

Storify

@Storify