【主楼】为什么同一个网站在Safari上总有问题
*图片来源掘金作者“ErpanOmer”
当你在Edge等浏览器中写好了网站，在火狐、Chrome、Edge上页面都几乎完美，然后你提交了代码，拿出了你的iPhone，打开了你的网站，发现，页面都全部乱了，这不是你的问题，是Apple的问题
很多人把Safari的各种奇葩表现归结为浏览器开发团队技术不行。这是一个巨大的误解，WebKit团队的工程师水平绝对是世界一流的，但问题在于，他们的优先级，从来不是让Web应用变得更好。你必须理解Apple公司的盈利逻辑，是App Store中的抽成，在App Store中的每一个应用每一次的交易，Apple都是要抽成的，那输入一串网址就能打开的网站不就是和Apple矛盾了吗？人人都用网页谁来给Apple送钱？所以Apple肯定要来限制网站，当你说“不用Safari不就行了”的时候很抱歉，因为第三方浏览器也必须使用WebKit内核（但是在欧盟地区，从iOS 17.4开始，符合条件的浏览器就可以使用非WebKit，中国大陆地区浏览器依旧强制使用WebKit内核）
那Safari的WebKit有什么问题呢，给你举几个例子
100vh问题：“在 Chrome 上，100vh 就是视口的 100% 高度，清清楚楚。但在移动端 Safari 上，100vh 的计算竟然包含了底部的地址栏和工具栏。当用户滚动页面、地址栏自动收起后，页面的实际可视高度和 100vh 的值就产生了错位。
直接后果就是：你精心设计的全屏落地页，在 iPhone 上永远会有一截内容被底部工具栏遮住，用户看不到你的核心按钮。
这个问题折磨了全球前端无数年，直到后来 CSS 标准被迫新增了 dvh（动态视口高度）、svh（最小视口高度）和 lvh（最大视口高度）三个单位来补充。而这三个补丁单位的诞生，完全就是因为 Safari 一家的问题”、Date构造函数：“一行在全世界任何浏览器上都能正常运行的代码，唯独在 Safari 上直接返回 Invalid Date：
javascript 代码解读复制代码// 在 Chrome、Firefox、Edge 上完全正常
new Date('2026-08-17 15:30:00');
// 输出：Mon Aug 17 2026 15:30:00
// 在 Safari 上：直接崩溃
new Date('2026-08-17 15:30:00');
// 输出：Invalid Date
原因极其荒唐：Safari 的 Date 解析器严格要求日期和时间之间必须用 T 分隔（即 2026-08-17T15:30:00），而不接受空格。这是一个极其微小的格式差异，但它足以让你的整个时间展示模块在所有苹果设备上全面瘫痪。”……还有一堆，当WebKit出现一个BUG的时候全球十几亿的iPhone用户就会集体中招
当然当你必须要适配iPhone的时候，一定不要相信Can I Use中的对勾，一定要真机实测，并且在开发的时候就一定要用iPhone测试效果（真以为“新时代IE”开玩笑呢），好的，今天的分享就到这里，欢迎大家留言！！！
作者楼主：族客源码 | 发表时间：2026-09-24 19:09:30 | ID：1790248170.024612297