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

CSS

Posted by ali behtash
ali behtash
1,812 Points

Responsive Web design - How do web designers identify mobile devices and desktop computer with same screen resolutions ?

Do some modern mobile devices like cellphones and tablets have the resolution as desktop/Laptop computers ? If the answer is yes then how does one target each device accurately ? Do some cellphones and tablets have similar resolutions as older desktop computers ? So far books and online resources have offered no clear instruction as how to handle this problem. I would appreciate your input on this problem. Thanks

ali behtash
ali behtash
1,812 Points

Thank you for your response, I wonder if you have a style sheet that covers desktop and all kinds of mobile devices ? If you do it would be great if you share it with us. It would be greatly appreciated.

3 Answers

Callum McMaugh
Callum McMaugh
10,064 Points
Callum McMaugh
Callum McMaugh
10,064 Points

Older screens and new mobiles screens do vary in resolution but they all still fall under certain breakpoints usually used with width. Modern phones will have ~600px in width for their breakpoints in portrait mode, and you can find old CRT monitors from decades ago have the same. Although the screen is physically larger, the pixel width is the same and would be triggered on these breakpoints. You can target 'resolution' in a media query to allow for css on different screen densities (small screen, high pixel) but is uncommon.

leahakbashev
leahakbashev
8,730 Points
leahakbashev
leahakbashev
8,730 Points

Yes, for example Sony Xperia Z smartphone has resolution of 1080 pixels by 1920 pixels. Therefore, use <meta name=viewport content="width=device-width, initial-scale=1">, which controls how the webpage is displayed on mobile devises.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Set breakpoints based on your content, not common device sizes. Screen sizes and resolutions are changing every few months, you'll drive yourself crazy trying to keep up. Instead, use content specific break points. At which point does your nav start to not work fully expanded? That's your break point for navigation.