Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

David Monteiro
David Monteiro
2,579 Points
Posted by David Monteiro
David Monteiro
2,579 Points

Responsive design through media queries not suited for newer, high density smarphone screens

Hey there!

While I understand that the point that this is lesson is more introducing students to the logic behind responsive design, I want to ask if this really matters when designing a website with responsive design in mind.

With 720p and 1080p screens becoming the norm, both breakpoints created in this lesson will not work in most current devices. I tried the site we're creating in this track on my OnePlus 3 (with a 1080p screen) and the site was displayed as if I was using it on a desktop. I did google for alternative media queries but with so many different screens of different sizes and dpi, it nearly impossible to have a responsive design that actually fits all devices.

So, my main questions are: What are the "proper" ways to implement a responsive design that works on so many different devices? As an aspiring web developer am I a hostage of a framework like bootstrap?

Cheers,

David

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Bootstrap might also use your dense pads like a desktop.

But if it does handle them more like you want, you can always look into the bootstrap source and see how they establish their media queries. Any technique used by Bootstrap you could emulate in your own code without using Bootstrap itself.

David Monteiro
David Monteiro
2,579 Points
David Monteiro
David Monteiro
2,579 Points

A couple of lessons further in,

<meta name="viewport" content="width=device-width, initial-scale=1.0">

fixed the way the device was misbehaving, but thanks for the hint!

rays0
rays0
16,293 Points
rays0
rays0
16,293 Points

I searched for an answer to the same question before. At the moment there's no way to detect the 'physical screen' size, which is a more accurate way to determine if a device is 'palm-held', 'hand-held', laptop, desktop, or tv. Right now to get a better idea of the physical screen size, we have to target user agents that contain 'mobile', 'ios', 'ipad', etc. And it's still not a reliable solution, some devices doesn't follow convention, new devices drops older spec standards, etc.

If every connected display is properly configured and the os could report the exact panel/screen's model/part number, then we could use that string and compare it to a community database of some sort to get the screen size.