Should i use max width

If you use max-width, when you change the size of the browser window on your desktop, you might be shown mobile-orientated styling, such as touch-friendly elements and menus and that kind of thing. It's shocking to me that it seems to be popular opinion that this is desirable. It appears to me that this is just a fancier version of liquid layout, but one that designers are embracing for some reason. When the design community at large chose to side with fixed layouts over liquid in the mid s, it was because text reflows impeded legibility often resulting in widows and other typogrphical artifacts.

Additionally, maintaining the codebase was often tricky from design to design to keep elements from colliding etc. The only difference between liquid layouts and responsive design is that responsive, due to better browsers and the proliferation of masonry-like frameworks make it easier to accomplish. Not all documents you open on the internet are going to behave this way on a desktop, nor are other types of documents or applications that you load on your desktop.

Pages designed before the dominance of mobile, just like MS Word, Photoshop, etc. I generally use 3 breakpoints: one for phones, one for tablet and one for desktop. The desktop and often at least the landscape portrait are fixed and the tablet portrait and below are liquid. This combination of adaptive and responsive allows the desktop to behave like a desktop site while keeping me from needed to layout odd separate fixed-width mobile device layouts. The text doesn't reflow on mobile devices because the viewport can't be resized.

Python Javascript Linux Cheat sheet Contact. Should I use max-device-width or max-width? Posting to the forum is only allowed for members with active accounts. Please sign in or sign up to post. Welcome to the Treehouse Community The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support.

Looking to learn something new? Posted February 11, am by karson Adam karson Adam 32, Points. Aleksandr Vinogradov 12, Points. Aleksandr Vinogradov Aleksandr Vinogradov 12, Points. Selvakumar Soundararajan 11, Points. Selvakumar Soundararajan Selvakumar Soundararajan 11, Points. Superb explanation :. Ninh Nguyen 1, Points. Should I use max-device-width or max-width? Ask Question. Asked 8 years, 2 months ago. Active 2 years, 9 months ago. Viewed 63k times. Why would you target one over the other?

Which one is the recommended one? Improve this question. Josh Crozier k 51 51 gold badges silver badges bronze badges. Jared Jared 2, 4 4 gold badges 24 24 silver badges 39 39 bronze badges. Add a comment.

Active Oldest Votes. Appendix A: Deprecated Media Features To query for the size of the viewport or the page box on page media , the width , height and aspect-ratio media features should be used, rather than device-width , device-height and device-aspect-ratio , which refer to the physical size of the the device regardless of how much space is available for the document being laid out.

Further Reading: Quirksmode. Improve this answer. Community Bot 1 1 1 silver badge. Josh Crozier Josh Crozier k 51 51 gold badges silver badges bronze badges. Agree with everything your saying but forgetting the backwards compatibility side of it, that wont be relevant in a few years. Why should a desktop site work differently because we now have mobiles?

I just don't think a mobile site should ever be displayed on a desktop. You should be able to resize to browser to any width and use the horizontal scrollbar. Say you wanted to compare a section of 2 sites but hide the sidebar, you would open in 2 windows and resize side by side — John Magnolia. I agree with John M, google is wrong, I've personally found their responsive design 'documentation' some of the worst fad driven stuff out there, given creedence only because the kids who write it are employed by google.

I initially upvoted this, but the answer is wrong in my opinion, just because more and more sites are ruining their desktop user experience, totally non-necessarily to fit a one size fits all responsive css framework done only to cut dev time in my opinion , does not mean you have to ruin your desktop user's experience.

We don't do that, and have increased conversions by 10x. Thank you so much for this post, by the way! The answer is a bit outdated. There's nothing wrong with max-device-width and it's important if you want to want use it in resizable viewport environments desktop. Show 4 more comments. Avoid device-width. The reason is you can't know how the users browsers respond to it. When you adjust layout based upon pixels in the viewport, you end up with mobile design on some desktops just because the user zoomed in.

That often results in the opposite of what the user wanted which is just a little magnification — Alice Wonder. You should file bug reports with mobile browsers that do not report an accurate device-width. In many cases, I found that alternative browsers were set by default to pretend they were a desktop browser and use 1 device pixel per CSS pixel - and that's likely the problem you were having. Paul Fox Paul Fox 2 2 silver badges 1 1 bronze badge. There are some mobiles where the viewport can be resized - for example windows allows "snapping" multiple apps onto the screen, and some android phones have support for windowing to see two apps at once.