mobile-safari 相关问题

稍微滚动，直到 safari 最小化地址栏，然后单击“下一步”。您可以看到底部栏被遮挡。再次尝试滚动，底部栏会恢复其位置。稍微滚动，直到 safari 最小化地址栏，然后单击“下一步”。您可以看到底部栏被遮挡。再次尝试滚动，底部栏恢复其位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <div id="app"></div> <script> const app = document.getElementById('app'); const state = new Proxy( { currentPage: 1, }, { set(obj, key, value) { if (key === 'currentPage') { if (value === 1) app.innerHTML = Page1; if (value === 2) app.innerHTML = Page2; window.scrollTo(0, 0); } obj[key] = value; return true; }, } ); const Stepper = ` <div class="fixed bottom-0 w-full justify-between flex px-10 left-0 right-0 h-20 bg-red-500"> <button onclick="setCurrentPage(state.currentPage - 1)"> Back </button> <button onclick="setCurrentPage(state.currentPage + 1)"> Next </button> </div>`; const Page1 = ` <h1 class="text-7xl font-bold">You're currently on page 1</h1> <div class="h-[1920px] w-full bg-grey-100"></div> ${Stepper}`; const Page2 = ` <h1 class="text-7xl font-bold">You're currently on page 2</h1> <div class="h-[1920px] w-full bg-grey-100"></div> ${Stepper} `; const setCurrentPage = (page) => (state.currentPage = Math.min(2, Math.max(1, page))); setCurrentPage(state.currentPage); </script> </body> </html> 在此处查看实际操作：https://streamable.com/shm9vd 自己尝试一下：https://magnificent-horse-ecfe4e.netlify.app/ 有办法解决这个问题吗？谢谢。如果您使用平滑滚动而不是即时滚动，它会起作用。 window.scrollTo({ top: 0, behavior: 'smooth' }); 亲自尝试解决方案。

html css safari mobile-safari

回答 1 投票 0

使用 Javascript 处理 iPad 上的待机状态

关于iPad事件，如何判断iPad是否/何时从唤醒状态变为待机状态？我想做的是，每当...

javascript ipad event-handling mobile-safari state

回答 4 投票 0

iOS 18 更新后，Safari 中废弃的 jQuery ajax 调用的 API 超时错误有所增加

报告的问题：我们的移动网站上的 iPhone 用户的页面重新加载次数和“重复出现问题...”错误页面有所增加。来自指标的数据： 95% 的 API 调用超时错误...

mobile-safari ios18 jquery-ajax

回答 1 投票 0

Flex 框布局和 Safari Mobile

下午好，我正在尝试在该网站上稍微重新安排页脚，适用于移动设备：https://staging.theenergyyear.com/ 在所有其他浏览器上，它目前看起来像这样：然而，在 Safari 上...

css responsive-design mobile-safari

回答 1 投票 0

溢出：隐藏在正文中，无法在移动 Safari ios 17 上工作？

我的网站遇到一些问题。简而言之，我有一个编辑帖子的功能，允许用户通过拖放来重新排列帖子中图像的顺序。为了防止

mobile-safari ios17

回答 1 投票 0

有没有办法提供苹果触摸图标的浅色、深色和有色变体

iOS 18 引入了新的应用程序图标颜色变体。除了基本图标（浅色模式）之外，开发人员还可以提供深色模式的图标和有色选项（请参阅更新的人机界面指南）。 ...

html mobile-safari apple-touch-icon web-clips

回答 1 投票 0

在 Safari 上重定向到外部链接失败

我只在 Safari 上遇到这个奇怪的问题。在我的 web 应用程序中，我使用 window.location.href 重定向到一些链接对于所有这些链接，safa 上的浏览器会返回连接丢失错误...

javascript safari mobile-safari window.location

回答 1 投票 0

env（安全区域插入底部）在CSS中不起作用

我无法让 env() 工作。 * { 填充：0；保证金：0； } .testclass { 背景颜色：绿色；填充底部：env（安全区域插入底部）； } 我无法env()去工作。 * { padding: 0; margin: 0; } .testclass { background-color: green; padding-bottom: env(safe-area-inset-bottom); } <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="initial-scale=1, viewport-fit=cover" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="testclass">Hello there</div> </body> </html> 这就是它的样子：使用 padding-bottom: 50px 添加填充按预期工作：我在这里做错了什么？编辑：我基本上已经弄清楚了（参见答案），但将网站添加到主屏幕时仍然无法正常工作。也许这与 Webpack 有关。看起来 env(safe-area-inset-bottom) 才能工作，主体本身必须滚动（因此任何父级中都没有 height: 100% 或 overflow: scroll。另外：使用“隐藏工具栏”选项隐藏底部栏不起作用。相反，它必须通过滚动消失。 * { padding: 0; margin: 0; } .testclass { margin-top: 100px; background-color: green; padding-bottom: env(safe-area-inset-bottom); }<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="initial-scale=1, viewport-fit=cover" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="wrapper"> <div class="testclass">Hello there</div> </div> <div style="height: 120vh"></div> </body> </html>

html css mobile-safari

回答 1 投票 0

mobile-safari 相关问题

最新问题