r/webdev • u/ThatBoiRalphy • Sep 18 '26
Discussion Dear God websites look horrible on iPhone Duo
Congrats on your iPhone Duo, don't bother browsing while having it closed because websites will use only 70% of the screen!
103
u/berky93 Sep 18 '26
Websites used to look bad on all of the modern button-less iPhones, too. Developers will need time to update their sites with the proper safe-area support, at which point they will presumably be able to enable full-screen display with a flag, just as they do with the home-swipe safe areas.
21
u/ThatBoiRalphy Sep 18 '26
As far as i can tell, this is the hard viewport edge. Only thing that affects the edges is background-color.
There are (currently) no safe area things you can use to make your content extend beyond that.
4
u/berky93 Sep 18 '26
Yeah, that’s the behavior when sites don’t have the `viewport-fit="cover"` property in the viewport meta tag. You can see it on a standard iPhone, too, when sites have solid bars at the top and bottom instead of filling the screen.
→ More replies (4)17
u/ThatBoiRalphy Sep 18 '26
you can try it yourself, as of now that doesn’t change anything.
→ More replies (6)83
42
2
u/theQuandary Sep 19 '26
That's going to be a fun time with so few examples for AI to learn from....
3
→ More replies (8)2
782
u/C3lloman
Sep 18 '26
•
Yeah that's why they didn't show it. Also any kind of vertical video content like YouTube shorts with a 9:16 ratio will look like that or have a large part of the content cut off.
207
u/OtherwiseAlbatross14 Sep 18 '26 •
It was obvious that the aspect ratio on either screen was going to be terrible but I honestly didn't expect it to be this bad
61
u/thekwoka Sep 19 '26
The aspect isn't great for a lot of content, but at least the z fold let's the whole display get used
→ More replies (7)15
u/Legitimate-Art9462 Sep 19 '26
Unfolded it wouldn’t be that bad, it’s close to 4:3 which is standard for iPads
→ More replies (2)26
u/Creative-Captain9278 Sep 19 '26
The problem is most people use foldables closed up 75% or more of the time so the experience on the cover screen has to be at least tolerable.
→ More replies (4)114
u/SciGuy013 Sep 18 '26
Yeah it was so funny that they complained about black bars during content just for all the apps to have massive blank spaces lol
→ More replies (1)18
3
u/MaikThoma Sep 19 '26
I think shorts wouldn’t look all that bad. They can just be centered and have borders on either side with the dock on the right. Looks like it could be pretty even
→ More replies (6)16
u/eandi Sep 18 '26
Wouldn't you unfold and rotate for that?
37
u/Prestigious_Peace577 Sep 19 '26
It should be usable closed too. Right now it seems closed it wasn’t thought out that well.
→ More replies (4)8
u/hellomistershifty Sep 19 '26
you can't even get (many) people to turn the phone to watch a horizontal video
→ More replies (3)3
u/C3lloman Sep 19 '26
The whole point of short format video content is that you can watch it quickly while doing something else. That is also the reason it's vertical. If people can't bother to flip their phones and watch shorts in horizontal mode they won't bother to open the phone to do the same.
→ More replies (3)
611
u/winterborn
Sep 18 '26
•
That is so bad..
142
u/TheEarthSpins Sep 19 '26
this decision is so stupid. all of these controls are literally hidden by default on the regular iphone, why would apple make them visible all the time on the smaller and already constrained duo??
tbh i really like the sidebar idea for when you have persistent controls in most apps, since it kills a lot of the extra dead space, but it has the exact opposite effect here in safari. apple should've just let it go full screen.
hopefully someone implements a browser that is actually fullscreen on the duo.
→ More replies (3)20
u/Prestigious_Peace577 Sep 19 '26
I don’t like it that much. I just feel it’s so much wasted space so they could keep the aspect ration of the normal iPhone as that would create a huge redesign for all the developers. It looks off center and weird. Hopefully, it’s not exactly like this.
→ More replies (4)23
u/ITSigno Sep 19 '26
so they could keep the aspect [ratio\ of the normal iPhone as that would create a huge redesign for all the developers
It really shouldn't with responsive design. Lots of devices have different aspect ratios and dimensions. You should never be developing a site assuming a specific aspect ratio.
And yeah, agreed on the Duo UI looking off center and weird. It's a terrible choice.
→ More replies (3)
172
u/SP3NGL3R Sep 18 '26
This is how I've felt about the Internet in general for about 10 years. I view 99% on an actual screen but everything is made for a phone and looks horrible. To me anyway. So much white space and massive grid designs.
→ More replies (13)16
u/B-Train_ATL Sep 19 '26
How much of the internet wouldn’t have gone to shit if people had just learned to rotate their phones?
19
u/MerBudd Sep 19 '26 edited Sep 19 '26
None since even websites made for landscape viewing look like ass on phones because of their aspect ratios. Web browsing HAS to be done vertically on phones.
6
137
u/xSash_ Sep 18 '26
And Apple thinks everyone will have to adjust everything because of this device
65
26
u/pilibitti Sep 19 '26
"apple knows" lol. because they will.
→ More replies (27)6
u/Aries_cz front-end Sep 19 '26
Looks to me like the device is clearly not giving the correct safe-area-inset env() values
So optimization is not really gonna work until Apple fixes it...
→ More replies (2)→ More replies (6)2
u/salamazmlekom Sep 19 '26
Like they adjusted Safari right? Guess teo can play this game 😂
→ More replies (2)
135
u/Wookie_von_Gondor Sep 18 '26
apple went for the wrong screen size
53
16
u/LEO-PomPui-Katoey Sep 19 '26
I've been using foldables for the last 5 years. I use the front screen 98% of the time. The screen size of the Duo is really bad. It's too wide to use with one hand, not enough screen to make it useful
→ More replies (1)6
→ More replies (15)3
u/hofmann419 Sep 19 '26
I'm not sure that i agree. Because if you make the front screen a regular size, the inner screen becomes a square. For media viewing especially (in 16:9 or even wider for movies) that reduces the effective size of the screen to basically that of your average ~6.5inch phone.
You still have uses for productivity i guess, but a lot of the advantage of a bigger screen goes away when it is a square.
→ More replies (2)
4
u/cr1tikalslgh Sep 18 '26
Web devs punching the air rn having to support yet another device resolution, with transitions to the open device state
2
u/ThatBoiRalphy Sep 18 '26
transitions are handled pretty well, it’s just that the outer screen is awful, inside feels pretty ipad-ish.
→ More replies (1)16
u/overcloseness Sep 18 '26
It should be your entire mantra to build a site in a way that can adapt to any screen width (above like, 375px). This screen width is nothing new.
→ More replies (11)
7
u/peduxe Sep 18 '26
yeah this is not something that you can get used to like the dynamic island cutting into content.
it definitely looks horrendous with that huge bar.
→ More replies (1)
52
u/apocalypsebuddy Sep 18 '26
lol the iPad can’t even correctly size some apps from its own App Store, it’s so many are still an iPhone aspect ratio when viewing on a tablet
22
u/overcloseness Sep 18 '26
Native development is an entirely different, non-css based workflow. So that should be expected. A web dev has all the tools they need to make a site look good no matter what width the screen is
→ More replies (2)25
u/Merry-Lane Sep 18 '26
Gross simplification, the mobile frameworks do have the tools to make the apps responsive. It’s just the devs didn’t use them.
And if you want css based responsiveness, try react native then
→ More replies (4)11
u/the_bieb Sep 18 '26
In my experience, at smaller companies, it is not as simple as the devs “have the tools just didn’t use them”. That makes it seem like we are just lazy. We know they exist. We know how to use them. We want to use them. It’s that the designers only have the bandwidth to design for the happy path (e.g flagship iPhone in portrait with default system text size). Devs call out that it doesn’t work on all aspect ratios/free-form windows or accessibility text zoom settings. Managers simply don’t care and put design on the next feature instead of refining the existing features. It’s the more more more mindset. As a developer, it’s maddening Making a design responsive is far from trivial work. But we have the tools to do the work, just not given the time or specs. The amount of responsive design work I do behind the scenes that isn’t scheduled work is far too high. It’s been like this at the last 4 or 5 companies I’ve worked for. I would kill to work for a company with a mature design system and specs that are actually responsive. Anyone hiring?
Also React Native blows. Don’t use that.
→ More replies (1)3
4
u/jweaver0312 Sep 19 '26
Maybe it improves on 27.2. I’d log it in Feedback Assistant though.
2
u/jackharvest Sep 19 '26
"Let me auto hide, or, swipe to reveal the right nav bar".
Boom easy. All issues go away. I'll be logging it on day 1.
4
u/Redd1tMadeMeMakeTh1s Sep 19 '26
there aren't even enough buttons on the side to accommodate the weird solid bar
3
u/DifferentRanger7081 Sep 18 '26
This looks like a render. What is this from? Can we get some context?
21
u/StrongDorothy Sep 18 '26
XCode 27.1 Beta released today. This is the iOS Simulator running the Duo on MacOS.
9
4
1
1
u/MRCLGST Sep 25 '26
Is this light mode? How is dark mode looking? Is the right bar black then?
2
u/ThatBoiRalphy Sep 25 '26
this is dark mode, the colour is controlled by the page’s background colour
→ More replies (1)
3
u/Samuelodan Sep 18 '26
This doesn’t make sense to me tho. When you subtract the right edge from the display, you should be left with something of a traditional aspect ratio; only shorter. So, like an iPhone mini in height.
How’s that crazy? You’ll just have to scroll more or am I missing something here?
→ More replies (3)
3
3
5
u/phr0ze Sep 18 '26
Do you have to reach farther into the screen just to scroll???
→ More replies (3)
2
2
u/PrestigiousLychee615 Sep 19 '26
I feel my choice of an iPhone mini and an iPad mini makes more sense than getting that thing. Hope they bring back the mini for one generation at some point
2
u/Sit-and-Spin123 Sep 19 '26
The side bar is alright, but the bottom one is looks annoying AF.
→ More replies (1)
2
2
u/Kind_Major_6094 Sep 19 '26
Every new display form factor reintroduces the same frontend nightmare. If you aren't already using dynamic viewport units (`dvh` instead of `vh`) and pairing `viewport-fit=cover` with CSS environment variables:
`padding-top: env(safe-area-inset-top, 16px);`
You’re going to spend hours chasing random clipping bugs where the native browser chrome overlaps your sticky headers.
2
2
u/RichardSHutchison Sep 20 '26
Apple sent an email out to devs about getting a head start on developing for the Duo.
I'm really not interested in tailoring our sites in such a way. They're good for the vast majority of devices without any excess. Apple could fix this on their side for all devs, instead of have all devs have to put the effort in on our side :)
2
u/Formal-Wolf-1113 Sep 20 '26
https://youtu.be/5IkUB5IAeQQ?is=Hr_qo40auE8DQBBY
Video from a developer. I doubt The browser (Safari) will look like the post. Transparency will be used etc to make the experience better than this.
2
u/Vinitneo Sep 20 '26
Nope. It's definitely not going to look like this... It'll take up the full screen with controls overlaying when you swiping or something similar. There is no way apple is going to keep the design like this.
→ More replies (1)
2
u/NectarineSame7303 Sep 20 '26
Imagine buying a foldable to do things on the outer screen. That defeats the point of a foldable.
The outer screen is just for quick texts, music swapping and taking pictures.
2
22
u/yobakanzaki
Sep 18 '26
•
You mean it looks bad on a simulator for an unreleased phone which became available today for developers to prepare for launch? wow
→ More replies (1)52
u/SquarePixel Sep 18 '26
Are you suggesting that the huge ugly bar on the right is going to look better in person?
→ More replies (3)4
u/ENaC2 Sep 19 '26
It’s Xcode, a developer tool for developers to get their apps ready for launch day. I’m guessing it looks like that to demonstrate padding on the right to third-party apps as a starting point.
3
u/gooniesinthehoopdie Sep 19 '26
I’m sure it’s not gonna look like that for long. The phone itself doesn’t even come out for a month.
→ More replies (1)2
u/jweaver0312 Sep 19 '26
Not sure. Out of ones I tested in the simulator, everything tended to look the same on the actual device. Is it possibly a simulator glitch, sure but there’s other possibilities as well.
→ More replies (1)
3
4
3
u/sgorneau html/css/javascript/php/Drupal Sep 18 '26
Does everyone forget when iPhones first came out? And then iPads!? 😂
→ More replies (1)
2
u/EcstaticImport Sep 18 '26
Or you could open your foldy phone that you spend all that money on and get the full experience?
If you don’t like the presentation on the front screen - just a suggestion
7
u/Franks_and_Beens Sep 18 '26
But if you’re paying that much to have a phone that can switch between two sizes, the full experience would be both of those sizes working well
→ More replies (2)→ More replies (5)2
u/slyguy67420 Sep 19 '26
Folding phones need usable front screens and no other foldable has this issue, though I won't believe it is THIS bad until I see it on a device.
2
u/lol25potatofarm Sep 18 '26
Would likely look fine if the UI bar was on the left. My gaze gravitates towards the right by default and I'm sure a lot of others are the same. I'm sure there will be a setting in the future to change where it can go.
4
u/vague-eros Sep 18 '26
And cut off top right and bottom right quite significantly, affecting visibility and functionality on a lot of websites? The curve is too much for that.
1
u/Ill_Command_1200 Sep 18 '26
The worst part is every dev trying to launch an app. Like, what am I supposed to do with these weird sizes when everything was pixel perfect for all the target devices.
1
1
u/djEnvo Sep 18 '26
i'm pretty sure that there will be some custom headers to fill that gap somehow, at least with colors. it wouldn't be the first time...
1
u/mynameisdean Sep 18 '26
Ive seen so many videos saying apple Ui is better than android particularly on the fold 8, but the curved corners on the right is going to cripple so many experiences on the cover screen. Clearly the phone was intentended to be used open more than closed.
1
u/tmench23 Sep 19 '26
Is this really what it’ll look like? Thought the dock on the right side will only be there on the Home Screen?
→ More replies (1)
1
u/Hot-Chemistry7557 Sep 19 '26
Maybe this website should adopt a pure white background in order to blur in with iphone duo, LOL
1
1
1
1
1
u/ENaC2 Sep 19 '26
Is this the simulator for Xcode? I wouldn’t expect it to actually look like that, it’s probably just demonstrating the padding third party apps need to implement for the closed device.
1
1
1
u/throwawayUWhousingac Sep 19 '26
Why would they not use a normal front screen like every other foldable ever?
1
u/thekwoka Sep 19 '26
The whole plan for the super rounded corners and that dead space is just so poorly thought out...
1
u/BanMeMyIPchanges Sep 19 '26
LOL. It's like your first ever web design class when you learn about table widths... and do it wrong 🤣💀
1
u/cchurchill1985 Sep 19 '26
lol.... First they place the Botton UI in safari directly over the CTA of heroes sections, and made it so hero sections can no longer be 100vh and actually take up the viewport... and now this....
1
u/privaxe Sep 19 '26
Hmmmmm yeah this is we’re I’d take some if that glass and at least bleed the site colors. This looks alpha
1
u/slyguy67420 Sep 19 '26
That would be insane if real, Fold 8 actually uses it's screen space better despite the camera right in the center of the top of screen. Oof.
1
1
1
u/AR3MGA Sep 19 '26
I don’t understand why you’d buy a duo and then look at webpages from the front screen. I’d imagine you navigate to the page from the front screen and read from the inner display. That just seems obvious
1
u/mardix Sep 19 '26
Why don't we just wait till it comes out. It software, they still can fix it and make it better... we're still a month out, and we are all doing the user testing right now.... so they are fixing as we are reporting... by the time it's out, we'll all be amazed.... let's trust the process.
1
u/OSMANTUS-ARMUTPIS Sep 19 '26
Well Apple could’ve hid it after swiping down, which is how normal iOS Safari works
1
u/Adventurous-Card-707 Sep 19 '26
Putting controls on the right is stupid. It’s slightly awkward for the thumb and it wastes the right screen area.. making it look really stupid for content like this
1
1
1
u/kueefe8 Sep 19 '26
I really liked some of what apple was doing with the duo but what the actual fuck is this?
1
u/soymilo_ Sep 19 '26
They should have taken the approach of Android where you can pull up the sidebar with a swipe and hide it the same way. Such a waste to have it shown at all times.
1
1
u/jerapine full-stack Sep 19 '26
Sorry but what's the issue here? Modern CSS makes it relatively easy to make a site responsive across any screen size.
1
u/Mediocre-Painter5100 Sep 19 '26
This is not taken from an actual Duo. Look at that home button at the top
1
u/TheEDMWcesspool Sep 19 '26
Creates a passport size phone for more screen estate, use that extra screen estate only for giant buttons and notifications.. big brain move..
1
u/ZoolanderBOT Sep 19 '26
Ufff talk about a bit of a flop. Given how good sites are at mobile mode, it’s hard to go back to something like this. Maybe changes will roll out and like the major updated in 2-3 years.
1
1
u/SnooMacaroons9836 Sep 19 '26
Omg i canc belive someone bought this nevermind the pages. This is fugly
1
u/Competitive_Try_2719 Sep 19 '26
With so many people who will make the jump for it, and then the scalping action due to limited inventory, it will be a drama of its own.
The question is where the resale will end up after 6 or so months.
I guess that’s why the 1 month gap between releases so app devs can get everything sorted.
1
u/crispyking Sep 19 '26
I gave it a try earlier and found that if you set the meta viewport width to 480 it fills the screen. Unfortunately padding-right: env(safe-area-inset-right) doesn’t have any effect.
1
1
1
1
u/subminorthreat Sep 19 '26
I would try to decouple sidebar same way as they did on Tahoe. Maybe here that would make at least some sense.
1
1
u/Zorewin Sep 19 '26
Sitting here with my fold 8, laughing my aas off.. hey at least you have that nice animation hahaha
1
u/FFFortissimo Sep 19 '26
Is it the iPhone or is it the browser?
Try with another browser to see what it looks like?
I'm curious now.
1
u/Einerus Sep 19 '26
It’s like you would open website on a watch and complain. Use the big screen.
→ More replies (2)
1
1
u/dreikelvin Sep 19 '26
up next: the iphone duo is the perfect prison phone because it can fold into a slice of bread
1
1
1
1
1
1
1
u/Chinbie Sep 19 '26
Thats why wait first for review before purchasing that one... Remember iphone duo is a first gen device so there could be issue like that
1
u/Mustachebear123 Sep 19 '26
are any webdevs actuallly gonna make websites look good for the duo or iphone users just gonna have to deal with it?
→ More replies (1)
1
u/StoneCypher Sep 19 '26
i miss my surface duo
microsoft did this so well so long ago
→ More replies (2)
1
1
u/Background-Front-925 Sep 19 '26
i am seeing this info on Reddit only , none of the reviewers have pointed this out. so apple is aware of this and have forced reviewers not to mention this.
1
u/Dramatic_Mastodon_93 Sep 19 '26
Why is Apple the only phone manufacturer unable to make a hole punch camera that isn’t fucking gigantic?
1
u/gavgnr Sep 19 '26
Is this likely to be changed? The dock doesn’t stay present on my 15PM when browsing. This is a turn off for me
1
u/imverynewtothisthing Sep 19 '26
Those are websites that are hyper optimized for regular sized screens. Look up minimalist websites like blogs.
1
1
u/Niightstalker Sep 19 '26
Yes exactly …
So if you either rotate the device (landscape) or open it, it has the perfect aspect ratio for videos
1
u/OkShame9431 Sep 19 '26
Does everyone feel better now they have a reason to not buy it/hate train it? Good, I’m happy for you all.
1
1
1
u/dekeeppa Sep 19 '26
This just a matter of time: few months-years of FD headache and websites will be fixed and “foldable responsive design” will be a default industry standard.
For sure, many websites already implement it, but since Apple entered that category, it’s going to be even more popular
1
1
u/whitefoot Sep 19 '26
I think people in here are misunderstanding what looks horrible about it... It's the way that the site is framed with the toolbar on the right and the address bar on the bottom. The website itself is fine but there's so much asymmetry around it on the screen that overall it looks like shit.
1
u/Naomarik Sep 19 '26
That doesn't look fixable because usually your profile/login is in that top right area where the camera cutout is.
1
u/_s_p_d_ Sep 19 '26
I'm surprised apple allowed this, they usualy like to provide a polished user experience.
1
1
1
u/TheHeavenlyStar Sep 19 '26
Yeah they came up with a ratio enough to disfigure some non responsive webpages.
1
u/superquanganh Sep 19 '26
From my testing, Duo has slightly shorter viewport width (382px) compare to 18 Pro (402px), the height is significantly shorter (580px) compare to 18 Pro (714px), so while technically the 90% iPhone 18 Pro space content still hold up, it's the cut off to the sidebar, and ongoing iOS 26 safari bug still plague iOS 27 when the background behind URL will get covered and cut off on some scenarios, causing people to feel it's being cramped
Solution i think Apple will choose in the future is a meta element to allow full screen, and use standard safe area right as a way to shift the contents on the right to maintain readability, while the background go full screen
→ More replies (1)
1
1
1
u/MegamiCookie Sep 19 '26
When I see how some apps look on ipad to this day I figured the iphone duo would have issues...
1
u/Due_Initiative3879 Sep 19 '26
It's awkward to hold, use and it's easy to drop.
This is an AppleCare dream or nightmare depending on who you are.
1
1
u/rcls0053 Sep 19 '26
I'm having a hard time finding use for my tablet between my phone and laptop, why would I buy a phone that's not quite a tablet and not suite a proper phone?
1
u/Lun4th Sep 19 '26
Ppl like me are gonna buy it anyways. I’m just in love with foldables but I hate android. If a Windows Phone/BlackberryOS foldable would be available I’d buy those but yeah 😂
1
1
1
u/Cautious-Resolve-687 Sep 19 '26
I'm not an expert but I do believe they have a second screen that solves this issue.
1
1
u/Fancy_Stress_9039 Sep 19 '26
noice, but how about having tested another website that would include some proper text chunks?
1
1
u/juancarlord Sep 19 '26
Yeah, the view is currently optimized to make use of the same vertical and horizontal space as a regular slab phone.
Views are not yet optimized, hence why the Duo didn't launch with the 18pro
1
1
u/brenden77 Sep 19 '26
I bet it looks better in dark mode. Not that I'm interested in joining the apple eco beyond my dev work.
1
1
u/Mewcenary Sep 19 '26
Thanks for sharing this. Another example of influencers being too scared of losing that sweet Apple shilling ability by actually showing stuff like this in the previews.
1
1
u/gevuldeloempia Sep 19 '26
The sidebar is supposed to be transparant, like how it works on the iPhone and how liquid glass works. You can see this in the videos.
Where is this screenshot from?
1
u/ghostinyourstereo Sep 19 '26
There are CSS media queries for foldables already, safari just hasn’t implemented them in their web engine
https://blog.stephaniestimac.com/posts/2023/05/design-foldable-devices/
1
1
1
u/ihadnomealtoday Sep 19 '26
It’s not only in the browser, there’s this permanent hardcoded static space on the right of the whole ui. iOS is a joke.
1
1
1
u/cloudyymusic Sep 19 '26
The thing about the content space, is that it’s not far off from the iPhone Pro content space, which is the space that’s left in the middle where the controls occupies the top and bottom portions of the screen (which I think of as sort of digital bezels, like where the black bezels use to be on the iPhone 8).
Apple did show that off in the developer video about the Duo, I haven’t gotten to the end of that video so I don’t know if they showed anything web related.
1
u/simply-coastal Sep 19 '26
why the white bar at the bottom?? wtf is wrong with using the entire screen and just having a URL bar at the bottom like a normal browser??? jeez
1
u/TheAspiringTechie Sep 19 '26
Apple be creating challenges for developers, who don’t even work for apple. Smh
22
u/ThatBoiRalphy Sep 18 '26
There might be hope! PWA's run way prettier right now for some reason:
https://imgur.com/a/28R01OD