Search code examples
responsive-designtablet

Full Hd Tablet and responsiveness


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?


Solution

  • 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.