Search code examples
cssmedia-querieszoomingscreen-size

CSS breakpoint for width around 1097px

I'm writing a media query to switch to mobile view when zoomed to 200%. It works fine on 200% but it breaks on 175% as on 175% my window.innerWidth changes to 1097px(on my laptop).

But the media query I'm writing for is targeting 1048px which is the standard size for table landscape width.

Which particular standard screen size should I target that it fits well in any laptop or computer when the zoom is 175% or 200% that is close to 1097px?

@media (max-width: 1048px) {
 // CSS goes here...
}
Solution

  • I'd say it depends on your layout and content which breakpoint fits best. There is no such thing as "THE default desktop screen width", as there are hundreds of different screen sizes out there, plus people might use a cropped browser window. Hence, I'd say check where your layout starts looking too narrow and use this as the breakpoint for mobile/tablet/desktop view.