question about the break points of bootstrap grid options when doing responsive layout

The following image is from bootstrap's website. They divide devices into four categories based on container width. Screen-Shot-2015-10-19-at-6.50.34-PM.png On the other hand, I found a CSS width table at http://mydevice.io/devices/ with screenshot below. Screen-Shot-2015-10-19-at-7.06.11-PM.png
So my question is that:
1. In picture one (table one), the container width is based on which column of table two in picture two?
2. According to apple, iPhone 6 is 1334-by-750 pixel resolution at 326ppi. So which category of table one should iPhone fall into? It is a device with pretty small screen while the resolution is high.
condor888Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Bootstrap grid is easy to understand
Just check the limit in px for each like you said:

Extra small devices Phones (<768px)      
Small devices Tablets (≥768px)      
Medium devices Desktops (≥992px)      
Large devices Desktops (≥1200px)

http://getbootstrap.com/css/#grid 
explain very well all @media query

You can expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

Bootstrap does't care about DPI.

Why do you need to compare both picture?
If you want to make sure it's fix all device then you should use an online service that allow to test your page under several device.

Also you may refer to some solutions provide in this thread (old but maybe still valuable)
https://github.com/twbs/bootstrap/issues/8185
0
Marco GasiFreelancerCommented:
To test my css I usually use these two services:

http://bradfrost.com/demo/ish/
http://troy.labs.daum.net/

They helped me to solve many issues :-)
0
condor888Author Commented:
@lenamtl, thanks for your answer. The reason that I want to compare the two pictures is that: if you check mydevice.io, you can see that for iPhone 6, there are two sets of pixels, one is physical height and the other is CSS height, what are the difference between them? And which one should I use to check against the media query breakpoints of bootstrap? Thanks!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Marco GasiFreelancerCommented:
As specified in the first line of the mydevice.io page, "Mobile devices, in Responsive Web Design, relate to a core value which is the value of CSS width", so you have not to relate to heght, but to width. And obviously, to css width: media queries are a css element and Bootstrap rules are css rules...
0
condor888Author Commented:
Thanks Marco. I did read that. But I just don't understand the difference between CSS width and physical width. How come the CSS width is so small on such a high resolution iPhone 6?
0
Marco GasiFreelancerCommented:
Maybe this can help you to understand the question: A pixel is not a pixel is not a pixel
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lenamtlCommented:
Hi,

By experience Bootstrap CSS will be ok for almost all device, I rarely need to make adjustment, this is why I'm using it.

Because we don't have all kind of device to test our CSS but what we do instead is
to use tools.

You can use Chrome dev tool: Device Mode & Mobile Emulation
https://developer.chrome.com/devtools/docs/device-mode

or you can use an online service like
https://www.browserstack.com

Remember that several OS exist for mobile device so you have to take this in consideration too :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.