Bootstrap 3 comes with 4 grid modes:
- XS: Extra small devices Phones (<768px)
- SM: Small devices Tablets (≥768px)
- MD: Medium devices Desktops (≥992px)
- LG: Large devices Desktops (≥1200px)
In the real world it doesn't depend on the screen resolution but in the device. For example Nexus 5 (1920px) uses XS and an iPad 1 (1024px) uses MD.
I want to make the site responsive, but not use 4 modes (as the site is complex, there are parts that are not usable in mobile at all - i.e. complex grid of images-). I just want to use only 2 modes: one for desktop (and tablets) and another for Mobiles.
Using Google Canary Emulation mode I found that:
- XS: BB Z10 / Z30; HTC Evo, Touch HD, Desire HD, Desire; IPhone 3GS/4/5; Nexus S/4/5; Samsung Galaxy Note / S3 / S4; Sony Xperia S
- SM: Amazon Kindle Fire HD 7; Nexus 7 / 7.2
- MD: BB PlayBook; IPAD 1/2/iPad Mini; IPAD 3/4
- LG: Amazon Kindle Fire /Fire HD 8.9″; Nexus 10
(Yep, Ipad 4 with Retina is MD but Kindle Fire is LG)
Where should i put the limit between mobile and desktop? I mean: MD and below for mobiles and LG for bit tablets and desktop? or SM for mobiles and the rest for big tablets/desktop?...
Thanks!