TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Trying to Recreate iOS on the Web

157 点作者 plurby5 个月前

27 条评论

btown5 个月前
<a href="https:&#x2F;&#x2F;hn.algolia.com&#x2F;?dateRange=all&amp;page=0&amp;prefix=false&amp;query=linux%20touchpad%20like%20macbook&amp;sort=byDate&amp;type=story" rel="nofollow">https:&#x2F;&#x2F;hn.algolia.com&#x2F;?dateRange=all&amp;page=0&amp;prefix=false&amp;qu...</a> is a parallel saga for mimicking the macOS touchpad behavior on Linux; it&#x27;s been a full 8 years in the making. It&#x27;s so much more than acceleration settings!<p>I really appreciate, and will buy a beverage of choice anytime for, anyone who tries to go down these paths, including OP, whether with web or desktop technology.<p>Painstakingly mimicking, then eventually improving on, Apple&#x27;s interactivity&#x2F;motion design is IMHO one of those things that could make open-source desktops a superior option to both Windows and Apple from a mainstream user viewpoint, and those possibilities should be cherished.
评论 #42451512 未加载
评论 #42453564 未加载
评论 #42452697 未加载
评论 #42451658 未加载
评论 #42451481 未加载
coder5435 个月前
Thinking about what feels different here, there are a couple of things that could be fun to implement:<p>- On iOS, opening and closing an app also scales and blurs&#x2F;unblurs the wallpaper at the same time that it’s animating the app entering&#x2F;exiting the foreground.<p>- Also, years ago, Apple added a very subtle 3D effect to the Home Screen. Essentially, when you’re looking at the Home Screen, as you tilt the phone, the icons and widgets move a few pixels in the direction of the tilt, which makes it feel like they’re popping out of the screen a little. To study the effect in detail, you can just look at the edge of an icon or the text below an icon and tilt the screen around and notice how it moves relative to the background image. It’s meant to be a very subtle effect, not some garishly dramatic effect.
评论 #42450837 未加载
评论 #42450687 未加载
评论 #42452094 未加载
评论 #42451165 未加载
评论 #42451560 未加载
评论 #42451645 未加载
yesimahuman5 个月前
Really nice, and I say that as someone that built a quite popular mobile web framework that duplicated a lot of iOS UI (Ionic). One thing I noticed is the swipe gestures aren’t working. This is all very doable on the web which many people don’t believe. It’s pretty wild what the web platform is capable of, the gap is absolutely with web devs who don’t know how to put the many modern APIs and capabilities into practice.
评论 #42450692 未加载
评论 #42450340 未加载
jsheard5 个月前
Remember when optimizing sites for mobile was new and everyones first impulse was to unironically turn their site into a fake iOS app? Those were the days.
评论 #42450005 未加载
评论 #42449973 未加载
评论 #42449957 未加载
klausa5 个月前
My main takeaways from this are:<p>— wow there sure are a lot of subleties in iOS animations and interactions that seem very _very_ hard to replicate<p>— why is my brain _so good_ and noticing those little things?! I shouldn&#x27;t be able to notice that the battery indicator is too thick; that the squircles are not continnous, or that the curves on all animations are just ever so slightly off.
thih95 个月前
Loosely related, there are frameworks for recreating native UI for mobile apps written in JS, e.g: <a href="https:&#x2F;&#x2F;framework7.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;framework7.io&#x2F;</a><p>&gt; free and open source framework to develop mobile, desktop or web apps with native look and feel
评论 #42451221 未加载
评论 #42452489 未加载
评论 #42450698 未加载
nmstoker5 个月前
Authentic in so far as there&#x27;s no back button and using it in Android backs you out of the whole site!
评论 #42450393 未加载
评论 #42452348 未加载
评论 #42450270 未加载
jaegerpicker5 个月前
Interesting bug: if you swipe on screen with the mouse button pressed and slide of screen to release the mouse button the on screen swipe action stays attached to the mouse cursor. Only sort of a bug because it&#x27;s only because it runs in a web page vs on an actual phone. Still would be interested in how to fix that in general.<p>Overall it looks cool, I&#x27;m a native mobile app guy so I&#x27;m always skeptical about mobile web. This doesn&#x27;t change that for me but I can see growth in the web platform for mobile.
评论 #42452006 未加载
redbell5 个月前
From a design perspective, this is really impressive. However, I noticed a few basic functionalities seem to be missing—at least for me—like the ability to return to the home screen from an app.<p>On a related note, <i>Try Galaxy</i> (<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=35886033">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=35886033</a>) is another fascinating project. It offers a web-based One UI clone, and when installed as a PWA, the experience becomes even more seamless.<p>Speaking of web-based UI clones, I can’t resist giving an honorable mention to Puter (<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=33838179">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=33838179</a>) and DaedalOS (<a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=38830132">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=38830132</a>). I believe they are exceptional projects that deserve recognition.
评论 #42455764 未加载
roblh5 个月前
There&#x27;s a really specific behaviour that iOS has with its collapsible top bars that I&#x27;ve been trying off and on to nail with CSS for ages as a little puzzle, but for some reason it&#x27;s always not quite right. As you scroll down or up, the bar remains perfectly in place and only starts moving up once it&#x27;s fully revealed or down once it&#x27;s fully gone. There should be a way to do it with `position: sticky` but whether you use some javascript or not, it&#x27;s always slightly jerky or wrong, especially on safari. Apple really does pay attention to these little things in ways others don&#x27;t.<p>And then they go and release that recent photos app update and make me seriously want to leave their ecosystem completely.
评论 #42452297 未加载
Jackknife95 个月前
They really missed the opportunity to show a gorilla or something when you flip the camera.
tgma5 个月前
We have come full circle. Kids these days forget that the official application framework for iPhone OS in 2007 was a bunch of HTML&#x2F;CSS&#x2F;images that mimicked iPhone OS UI as a web application (basically poor man&#x27;s PWA).<p>The jailbreak community reverse-engineered iPhone headers and developed an unofficial toolchain based on llvm-gcc right away to build iPhone applications and they had an app store which still lives as Cydia (saurik et al) before Steve believed in that. Apple only threw the towel half a year later with an official beta SDK after the product-market-fit was so strong that they had no choice.<p>Now we recreate the whole OS in browser.
jballer5 个月前
Does anyone else remember the online User’s Manual for early iPhones? It was web-based, but had a full JavaScript reimplementation of UINavigationController, UIScrollView, and UITableView.<p>I always suspected it was part of some bigger project that never panned out (maybe just prototyping?).
deanc5 个月前
I once did something like this for Nokia when their phones moved to Windows Phone. The devil is in the details, and 90% of the time was spent mimicking the animations and transitions.
reddalo5 个月前
It&#x27;s impressive, but it&#x27;s completely broken on Macs with a normal mouse connected and Firefox, because scrollbars appear everywhere and they break the layout.
wruza5 个月前
Why does it stutter and flash black screen first time you open an “app” or even switch tabs in e.g. clock app? Does it use react as a renderer?
oefrha5 个月前
Nice, the most jarring difference to me is when you scroll up in Photos or Settings, the topmost area isn’t blurred.
mentalgear5 个月前
Well done! This reminds me of my own recreation (11 years ago!) of the iOS 7 homescreen as a webapp! :P
EugeneOZ5 个月前
Font size in inputs should be strictly 1rem &#x2F; 16px. Otherwise, they’ll be zoomed in Safari iOS.
hk13375 个月前
It even replicates how annoying it is to swipe with a mouse.
byyoung35 个月前
looks good. Main thing is the swipe gestures need some work
kookamamie5 个月前
The icons look blurry.
评论 #42449976 未加载
评论 #42450765 未加载
评论 #42450094 未加载
评论 #42450484 未加载
maxcruer5 个月前
at least the calculator should work...
zghst5 个月前
Impressive!
davidavidavid5 个月前
com
solarkraft5 个月前
I thought this would be about the interactions that are so charactetistically iOS and are hard to recreate on the web.<p>Well, it seems that the things that are hard to recreate have been omitted, making this not all that interesting.<p>On that note: It would be interesting to see something that actually does this.
评论 #42455700 未加载
评论 #42450701 未加载
codefeenix5 个月前
Here I was expecting to see emulated Cisco software