I am about to buy a new tablet that has a 1900x1200 resolution screen and 283 ppi (pixel per inch).
When we develop with bootstrap, we can see the that the breakpoint for tablet is about 750px wide.
Having a tablet with this huge resolution, will my website adapt to the wide, or will I see the whole website with no responsive changes on the 8" screen due to its resolution?
Your real resolution (physical) and virtual (viewport) resolution are two different things.
This site should help you with telling how big the viewport is of any device: http://viewportsizes.com/
As for "Bootstrap breakpoint for tablet", it's just a name. What Bootstrap actually is about is xs
, sm
, md
and lg
breakpoints. It does not use any device detecting mechanism, all it's basing on is only the viewport width
.
EXAMPLE:
So if you do have Samsung Galaxy Tab 8.9
that has viewport width of 1280 px
in landscape, your website on landscape will look like on my laptop that has 1280px
width screen. But on portrait your Galaxy Tab will use other breakpoints, as it only has 800 px
width.
#2 EXAMPLE:
On their website, Apple says that iPad Air
has resolution of 2048x1536
pixels. But as we know, iPad is 'Retina' device, so it's real resolution sizes are twice as long, as it's viewport (so physical resolution is 4 times bigger than virtual). And as we see on http://viewportsizes.com/?filter=ipad%20air (anyone with iPad can check with JavaScript), in reality it has a laughable 1024x768
pixels.