www.wysiwygwebbuilder.com

Hi,

I been using 768 breakpoint for mobile for my sites so far, for years, and 1280 for deskop... today i rotated my mobile (iphone 14 Pro max) and i saw that my site turns into desktop mode in the other side.

I wonder what breakpoints do you use to adjust for all mobiles and ipads of all sizes?

Thanks!

I use fully responsive design so breakpoints are not critical. Worth the learning curve. I used to use a different web design program (non responsive but with multiple versions/screen sizes) and never really found breakpoints that always worked with the various phones, tablets and computers out there.

Personally, based on my research and the fact these have never really failed me, I typically will use the following breakpoints:

default = 1900, 1346, 1024, 768, 485, 360

I use 1900 (instead of 1920) and 1346 (instead of 1366) to allow for the scrollbar on desktops. I've had instances where it made a difference. Of course, I only use what breakpoints are needed based on the design. If the design is simple, you may not need many if any. However, the more complex design, the better to use them.

I use 1250,980,768,480,380 320. Have moved away from 320 and have changed most pages to the 380 as a min. reflecting current screen sizes. Seems to work okay for me.

I generally switched to the method of working without using breakpoints. This is much easier, since the behavior of some elements is easier to configure through your CSS code than to configure them through breakpoints.

Me too. I try to use layout grids and suchlike and let the browser worry about these things.

Alan

Adjust breakpoint based on your needs that is the most accurate breakpoint I can point out for you. If you have a new device then all our advice may change instantly. So based on your device's screen screen size you need to adjust it accordingly.

But as for the apple eaters here are the breakpoints.

1. Extra Small (XS) devices:
- Typically less than 576px wide

2. Small (SM) devices (e.g., older iPhones in portrait orientation):
- Between 576px and 767px wide

3. Medium (MD) devices (e.g., most popular smartphones in portrait orientation):
- Between 768px and 991px wide

4. Large (LG) devices (e.g., tablets and larger smartphones in landscape orientation):
- Between 992px and 1199px wide

5. Extra Large (XL) devices and above (e.g., larger tablets and desktops):
- 1200px and wider

For iPads, you can consider defining breakpoints specific to their screen sizes. The common ones are:

1. iPad Mini:
- Typically between 768px and 1024px wide

2. iPad:
- Between 768px and 1024px wide

3. iPad Pro:
- Usually wider than 1024px, depending on the specific model