Preconditions and environment

Magento 2.4.5 - Luma / Blank Themes

04012ba#diff-763edb48523a1fbd76ed756edc437ad0f8adf78f4652dd876852166e9efe5d7c

Any version that came in after I believe Magento 2.4.4.

Steps to reproduce

Load on a browser set to 768px wide or iPad mini. (Smallest Tablet / Desktop)

Expected result

Should be desktop.

Actual result

Loads as mobile.

Additional information

Commit mentioned above moves mobile break points, in older versions the breakpoint for mobile seemed to be 1px lower than currently and changed because of some page builder issue that seems completely unrelated to real break points and completely changing how Magento renders on tablets?

Im testing on a portrait iPad mini which is showing mobile when was previously desktop (Small tablet 768px) i've read dev docs and checked some demos online how they behaved and see what is supposed to be happening...

Dev docs states that "Breakpoints are used in the CSS code to set up the screen width at which the design switches from the mobile to the desktop version." and that the mobile breakpoint in Luma and Blank are 768px "@screen__m: 768px (in the Blank and Luma themes, this breakpoint switches between mobile and desktop views)"

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/responsive-web-design/rwd_css.html

MagePlaza 2.4.5 Demo

This seems to break at 769? so mobile on an iPad Mini at 768px.

https://magento-demo.mageplaza.com/?_gl=1*6n3fs2*_gcl_au*MTAxNjY2NjA5MS4xNjg5MTYwNTYx

MageBit 2.4.? Demo

Breaks at 768 so desktop on an Ipad at 768px.

https://magento2-demo.magebit.com/

Not sure really what the intention is here anymore but feel according to docs the iPad mini (or 768px devices) should be desktop. Have fixed locally to be desktop again at that width but this is incorrect and needs to be sorted. Both the Blank and Luma themes however are mobile at 768px and that commit needs reverting.

Release note

No response

Triage and priority

• Severity: S0 - Affects critical data or functionality and leaves users without workaround.
• Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
• Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
• Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
• Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.