I regularly run into display issues when creating the mobile versions of a website.
On one mobile phone (or tablet) the website is displayed correctly, while on another mobile phone (or tablet)—although with different screen sizes—the display is less good or even poor. Text runs out of the viewport. Columns become extremely narrow, causing letters to appear underneath each other instead of next to each other. This can be solved by setting the columns to 12 for the mobile version. However, it then turns out that a certain type of mobile device displays the tablet version (where two columns next to each other would normally fit), which causes incorrect rendering. Does this mean that for tablets only a single-column layout is actually possible?
It’s also possible to adjust the breakpoints, but that too feels like guesswork because it can’t really be verified. In the editor, everything looks fine.
Example:
Just now I received a report from someone using an iPhone 14 Pro Max (a large mobile device). In this case, the H1 extends beyond the viewport. Sometimes you can deduce that a mobile view switches to a tablet view, but in this case it seems that the desktop version is being displayed. This means that headings (H1) that are designed for desktop need to be made smaller to remain visible. That, in turn, affects the desktop version—the design is no longer how it was intended.
Am I the only one who runs into this on a regular basis? And is there a solution for this?
Who can help me? This issue causes a high level of irritation for my clients, which also results in lower ratings for my work.
Replies are visible only to logged in members with an active subscription.
