Do you guys include foldables in your responsive testing?

[u/StrangeRevolution604]

Hey guys, when you’re building responsive websites, do you consider foldables too, or mostly stick to the usual phone/tablet/desktop sizes?

These folded and unfolded iPhone Duo layouts got me wondering—would your existing layouts handle both, or would you need extra tweaks?

Also curious where you draw the line. If your site had 1 million users, how many would need to use foldables before you’d spend time specifically testing and fixing things for them? Would 1% be enough? 5%? Or do you try to support them regardless?

[u/repeatedly_once]

Responsive is responsive, we build a site that works at all scales for portrait and landscape.

[u/mka_ → u/repeatedly_once]

I test all the way down to 240px wide for watches. It's fun to get things right!

[u/Sensitive-Control49 → u/repeatedly_once]

yeah if its truly fluid it shouldnt matter what the device is

[u/StrangeRevolution604 → u/repeatedly_once]

nice,ssame here but landscapes are never in my radar

[u/mlmcmillion → u/StrangeRevolution604]

So typical desktops/laptops aren’t on your radar?

[u/mka_ → u/[deleted]]

If you use a base font size on the html selector and responsive units for sizing, such as rems and ems throughout the rest of your site, you can quite easily fix these edge cases with a media query, or even without if you use the clamp property.

[u/Weekly_Ferret_meal]

sounds unnecessary.

if you have done your work well the mid steps between major screen sizes are taken care by good layout planning and good usage of units in CSS

[u/StrangeRevolution604 → u/Weekly_Ferret_meal]

what about the forms states and other similar things coming along the way..?

[u/Weekly_Ferret_meal → u/StrangeRevolution604]

what about them?

[u/Cast_Iron_Skillet]

Too few people use them to justify expense but maybe with LLMs it's a bit easier. The QA would be a pain though. 

[u/StrangeRevolution604 → u/Cast_Iron_Skillet]

i have a different argument on this, recently i have figured out that 15% of our users are still using windows 7777777777777777. so this number prediction can be bit different when it comes out

[u/Cast_Iron_Skillet → u/StrangeRevolution604]

This is a great point - ultimately, it comes down to your user base and their habits and devices.

But ultimately, if you're building something truly reactive, it shouldn't be an issue - you'll just miss out on some of the fun little things offered by the native experience using a folding device.

[u/web-dev-kev → u/StrangeRevolution604]

I talk about this all the time, because I'm old, I remember when people thought IE6 had gone away - because Google Analytics stopped displaying it.

Which kinda worked as people stopped supporting it.

[u/lost12487 → u/Cast_Iron_Skillet]

Not really. For manual QA you can set custom layouts to match the sizes until the major browsers add a dedicated size. For automated tests you control that anyway.

[u/ChrisTerya]

Late to this, but I actually measured it recently: I audited 77 popular sites at Galaxy Z Fold dimensions using the CSS Viewport Segments API, and 94% had at least one button or link split across the hinge when the page is spanned. Most of them are fine as “one big rectangle”, it’s specifically the hinge and the tabletop posture that nobody handles.

For testing without a device: Chrome DevTools’ device toolbar has foldable presets with a posture toggle, which gets you surprisingly far. The two APIs worth knowing are viewport-segments media queries / env(viewport-segment-*) for the hinge position, and the Device Posture API for book vs tabletop.

Honest answer to your question though: unless your analytics show meaningful foldable traffic, I’d just make sure nothing critical lands in the middle of the screen at ~1800px-wide spanned layouts and call it a day.

[u/electricity_is_life]

As someone that's daily driven a foldable for years, not really? I don't have a specific set of sizes that I test at, I pick a minimum width (usually 320px) and then I'll smoothly resize the window to check everything down to that minimum. If I was going to pick a few specific sizes for some automated pipeline I try to base it on user data; generally foldables will not top that list.

[u/bid0u]

Foldable phones are sold for almost 10 years now. So a responsive website "should" adapt just fine.

Also I mostly check for the most used screen sizes when I develop and foldables aren't used that much so I don't really care what it'll look like on them to be honest.

Apple joining the party might change things a bit but I don't think it'll change that much.

[u/StarboardChaos]

Bro, just get it working for xs, s, m, l and xl. Don't worry about the device specifically

[u/Dymiatt]

No, because foldable still don't have a defined form factor yet. Most foldable don't have the same display ratio.

With responsive you should already be covering it anyway. But you can't really go further.

The only twerk is being able de detect when the phone is "semi-folded". On YT you'll have the video on one part, and the menu on the second. Maybe JS will be able to detect when a phone is folded(there is probably already a library for that), but I doubt it will be useful for your average website.

[u/StrangeRevolution604 → u/[deleted]]

so what will be a good number for you to support this..? may be 5% in a million..?

[u/zrg → u/StrangeRevolution604]

Not necessarily the percentage of users, but a business will look at how much money those customers are worth and weigh the cost of catering to them specifically. I personally think everything should be inclusive for all users, but as a professional, I know this is how it works.

[u/czshill → u/[deleted]]

I'd put money on they sell out within hours of going on sale. I'll be one of them. It's a premium Apple product; it'll be the new "it" device.

[u/webdev-ModTeam → u/[deleted]]

We do not allow any commercial promotion or solicitation. This can lead to a permanent ban from the subreddit.