mobile-safari 相关问题

为什么浏览器在单击后退按钮时不恢复上一页的滚动位置？

我使用 HTML 和 JS 开发一个相对简单的电子商务类型网站，没有 React/框架。我们偶尔会收到客户（特别是使用移动 Safari 浏览器）的投诉，称...

Web Audio -- 仅在 iOS 上没有声音

我有一个网络应用程序可以在除 iOS 以外的所有平台上成功播放音频样本。 这是我最小的可重现示例，下面有其他上下文。 const AudioContext = window.AudioContext ||

MacOS + iOS Safari 无法正常播放视频（HTML5 Video-Tag）

我最近遇到了在 MacOS Safari (16.4) 和 iOS (16.4) 上的 Safari 中发生的问题。我什至很难描述问题，因为老实说我根本不明白...

移动 safari 和 chrome 上的背景视频故障

我遇到了一个问题，即在 iPhone 版本的 Safari 或 Chrome 上查看时，背景视频会导致网站的其余部分闪烁。它在全尺寸浏览器上按预期工作。 如果我...

iOS：在 Safari 中打开欢迎页面，而不是 CNA（后验证）

我正在运行一个强制门户，目标受众仅为移动设备。在 CNA 中验证后，我想为用户打开一个“欢迎页面”。此页面应在（移动）Safari 中打开，...

在使用 IOS 和日文 KANA 键盘时，请帮助我解决 React web 中的输入错误

在我的 React Web 应用程序中，我有一个聊天功能，它的工作方式如下： 当用户向 Textarea 输入消息时，按下发送按钮，textarea 重新聚焦以便用户可以输入下一条消息 问题：在 iphone ...

我的网站无法在 Safari iOS NGINX 上运行

我正在使用 VPS 和 Nginx 托管我的网站。 一切正常但在 iOS 上无处不在...当我尝试访问我的网站时，safari 告诉我“Safari 无法建立安全连接&qu...

iPhone 上“添加到主屏幕”的 Javascript？

是否可以使用 Javascript 模拟 Mobile Safari 书签菜单中的“添加到主屏幕”选项？ 类似于 IE 的 window.external.AddFavorite(location.href, document.title);宝...

Web worker 作为精确计时器：在 iOS 中不一致？

我在 web worker 中使用以下代码来安排事件以精确的 10 毫秒间隔发生。 这似乎适用于除任何 iOS 浏览器之外的所有浏览器。 （桌面 safari 很好。） <question vote="3"> <div> </div> <p>我在 web worker 中使用以下代码来安排事件以 10 毫秒的间隔准确发生。</p> <p>这似乎适用于除任何 iOS 浏览器之外的所有浏览器。 （桌面 safari 很好。）</p> <pre><code>&lt;script id=&#34;masterClock&#34; type=&#34;javascript/worker&#34;&gt; let onmessage = function (event) { let delay = 10; // milliseconds let time = Date.now(); while (Date.now() &lt; time + delay) { }; // waits 10ms increments in all browsers except mobile Safari postMessage({data: []}); }; &lt;/script&gt; </code></pre> <p>任何建议/解释表示赞赏！</p> <p>编辑：</p> <ul> <li>我尝试使用基于 <pre><code>setTimeout</code></pre> 的计时器，但它太不精确了，对 iOS 根本没有帮助。</li> <li>我尝试了一个基于<pre><code>requestAnimationFrame</code></pre>的替代计时器，但它在iOS中也不一致。</li> <li>我考虑过使用<pre><code>AudioContext</code></pre>，但我不想预先安排所有事件，因为用户在进行时与它们进行交互；但也许它可以作为计时器？</li> </ul> </question> <answer tick="false" vote="0"> <p>由于 iOS 设备可能具有电源管理功能，可以在后台或屏幕关闭时限制或降低 JavaScript 执行的优先级（如 <a href="https://www.reddit.com/r/apple/comments/49ieb6/safari_deprioritizing_javascript_and_affecting_a/" rel="nofollow noreferrer">this thread</a> 所示），您可能需要考虑另一种后台任务机制。</p> <p>尝试一个 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" rel="nofollow noreferrer">Web API Worker</a> 它将调用您的 javascript 循环：</p> <pre><code>&lt;script&gt; const worker = new Worker(&#39;worker.js&#39;); worker.onmessage = function (event) { // Handle the message from the worker console.log(&#39;Message received from worker:&#39;, event.data); }; &lt;/script&gt; </code></pre> <p>还有你的剧本：</p> <pre><code>let delay = 10; // milliseconds function timer() { let startTime = Date.now(); while (Date.now() &lt; startTime + delay) {} postMessage({data: []}); setTimeout(timer, delay); } timer(); </code></pre> <hr/> <p>但如果问题仍然存在，那么是的，Audio worker 更精确。由于您需要保持交互的进行，请考虑一个 <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorklet" rel="nofollow noreferrer">Audio Worklet API</a>，它用于提供自定义音频处理脚本，这些脚本 <em> 在单独的线程</em> 中执行以提供非常低延迟的音频处理。</p> <p>正如<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletProcessor#processing_audio" rel="nofollow noreferrer">文档所建议的</a>，您需要：</p> <ol> <li>扩展<pre><code>AudioWorkletProcessor</code></pre>类（参见“<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletProcessor#deriving_classes" rel="nofollow noreferrer">派生类</a>”部分）并在其中提供您自己的<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletProcessor/process" rel="nofollow noreferrer"><pre><code>process()</code></pre></a>方法；</li> <li>使用<a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletGlobalScope/registerProcessor" rel="nofollow noreferrer"><pre><code>AudioWorkletGlobalScope.registerProcessor()</code></pre></a>方法注册处理器；</li> <li>使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worklet/addModule" rel="nofollow noreferrer"><pre><code>addModule()</code></pre></a> 方法在音频上下文的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/audioWorklet" rel="nofollow noreferrer"><pre><code>audioWorklet</code></pre></a> 属性上加载文件；</li> <li>基于处理器创建一个AudioWorkletNode。处理器将由 <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioWorkletNode" rel="nofollow noreferrer"><pre><code>AudioWorkletNode</code></pre></a> 构造函数在内部实例化。</li> </ol> <p>意思是创造一个<pre><code>audio-worklet-processor.js</code></pre>：</p> <pre><code>class TimerProcessor extends AudioWorkletProcessor { static get parameterDescriptors() { return [{ name: &#39;delay&#39;, defaultValue: 10 }]; } constructor() { super(); this.timer = 0; } process(inputs, outputs, parameters) { const delay = parameters.delay[0] || 10; this.timer += 128 / sampleRate * 1000; // 128 is the default buffer size if (this.timer &gt;= delay) { this.timer -= delay; this.port.postMessage({ data: [] }); } return true; // Keep the processor alive } } registerProcessor(&#39;timer-processor&#39;, TimerProcessor); </code></pre> <p>您可以从您的<pre><code>worker.js</code></pre>注册它：</p> <pre><code>(async () =&gt; { // Load the audio worklet processor const audioContext = new AudioContext(); await audioContext.audioWorklet.addModule(&#39;audio-worklet-processor.js&#39;); // Create the audio worklet node and connect it to the destination const timerNode = new AudioWorkletNode(audioContext, &#39;timer-processor&#39;); timerNode.connect(audioContext.destination); // Set up a message listener timerNode.port.onmessage = (event) =&gt; { // Handle the message from the audio worklet processor console.log(&#39;Message received from audio worklet processor:&#39;, event.data); }; })(); </code></pre> <p>然后打电话给您的工人：</p> <pre><code>&lt;script&gt; const worker = new Worker(&#39;worker.js&#39;); worker.onmessage = function (event) { // Handle the message from the worker console.log(&#39;Message received from worker:&#39;, event.data); }; &lt;/script&gt; </code></pre> </answer> </body></html>

PWA 中的 IndexedDB 错误：无法打开磁盘上的数据库文件

在移动版 Safari PWA 中，调用 indexedDB.open 时，出现错误“无法打开磁盘上的数据库文件”。 手机Safari浏览器未添加到家时不会出现该错误...

如何在 iOS 上的 Chrome 中下载/保存视频？

我有一个 React 应用程序，页面上有一个视频播放器。播放器是用 html 标签制作的。播放器下方有一个下载视频按钮，上面有一个 onClick 处理程序。单击此功能

使用 webkitTransitionEnd 编码

我正在编写一个使用事件 webkitTransitionEnd 的网络应用程序（适用于 iPad）。 我想在第二次转换结束时回调一个函数。之所以有两个转换是因为...

iOS Safari 在使用麦克风时降低音频播放音量

我一直在尝试使用网络音频 API 录制和播放来自服务器的音频响应。但是当麦克风正在使用或什至以编程方式停止时，播放音量非常低。好像是

仅在 Mobile Safari 中不一致的 10ms setTimeout

我有一个网络应用程序使用 10ms，重复 setTimeout 作为主时钟。 这似乎适用于除移动版 Safari 之外的所有浏览器。桌面野生动物园很好。 setTimeout 在 web worker 中，但是

Safari iOS 上的文件系统访问 API - createSyncAccessHandle() UnknownError: 'invalid platform file handle'

我目前正在重构一个应用程序以使用 OPFS 在 iPad 上保存图像，用于用户需要在没有 wi-fi 的位置拍照但将所有图像存储在 iPad 上的用例...

A-Frame a-video 在 safari ios16.1 和 iphone 12 中不起作用？

我是A-Frame的新手。我尝试制作一个演示，我在场景中放了一段视频。它在我的电脑上工作，但在我的移动设备上有一个黑色的飞机。这是屏幕截图和代码。 在 Macos chrom 中运行演示...

iOS 10：在使用 -webkit-overflow-scrolling: touch 设置样式的 HTML 列表滚动期间不确定冻结

概述 这个问题是关于 滚动期间的不确定冻结 用 CSS 设计样式 -webkit-溢出滚动：触摸 在 iOS 的 Safari 浏览器上。 类似问题 我读过类似的 概览 这个问题是关于<ul />的滚动过程中的不确定冻结，这是 用 CSS 设计样式 -webkit-overflow-scrolling: touch 在 iOS 的 Safari 浏览器上 类似问题 我读过类似的问题或帖子 如果我使用 -webkit-overflow-scrolling，Div 滚动有时会冻结 iOS 9 `-webkit-overflow-scrolling:`touch 和 `overflow: scroll` 破坏了滚动能力 iPad 上的 Webkit 溢出滚动触摸 CSS 错误 http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/ 等等。 但我看不出哪些解决方案可以解决我的问题。 本期的 HTML 和 CSS 我在最新型号的iPad上用index.html显示了下一个index.css。 index.html https://github.com/jun68ykt/wos-touch-sample/blob/master/index.html index.css https://github.com/jun68ykt/wos-touch-sample/blob/master/index.css 这些都很简单。上面的index.html只有一个列表<ul /> 其中包括 50 个项目，包含在 <div class="container"> . 本期复现情况 也许你可以按照下面的流程重现 滚动列表到达底部 确认侧边栏消失后，触摸并尝试进一步向下移动。 当然，列表不能滚动 接下来，改变移动手指的方向，尝试倒回顶部 但我发现特别是第一个手指指向顶部的笔画不起作用。 几秒钟后，我可以触摸并将列表移动到顶部。 为了更好地理解，我将电影发布到 YouTube 上，我在其中操作 iPad 以显示上面的 HTML。 -webkit-overflow-scrolling 示例：touch https://www.youtube.com/watch?v=MkAVYbO_joo 以上程序项目的问题点4查看于 关于这部电影的 TC0:08。 需要注意的是，上面电影中我的iPad是 iPad 9.7 英寸（最新型号） iOS 10.3.2 我在其中使用 Safari 浏览器。 想要的答案 你能帮我一个忙吗？下一个问题我需要一些帮助。 为什么会出现上面4.的情况？ 如何修复 HTML 或 CSS 让列表滚动更顺畅？ 示例程序 可以从 GitHub 下载上面电影中显示的示例程序。 以下 URL 是它的回购协议。 https://github.com/jun68ykt/wos-touch-sample 此示例需要 Node.js 来运行服务器。 致以诚挚的问候。 可以绕过这个问题的方法是使用身体的滚动。但这是针对特定场景的。 有点hackish，但是当列表滚动到顶部或底部时，您可以通过触发一个像素滚动来绕过滚动锁定。 这是一个简单的例子： PS 你可以使用 overscroll-behavior 来解决这个问题，但这需要 iOS 16 const list = document.querySelector('.list'); list.addEventListener('scroll', onePxHack, { passive: false }) function onePxHack(e) { const { currentTarget: list } = e const atTop = list.scrollTop === 0; const atBot = list.scrollHeight - list.scrollTop === list.offsetHeight; if (atTop || atBot) { list.scrollTop += atTop ? 1 : -1; e.preventDefault(); } } .container { background-color: #DDD; width: 300px; height: 500px; position: fixed; top: 0; left: 0; margin-top: 50px; margin-left: 50px; } .list { height: 500px; overflow: auto; -webkit-overflow-scrolling: touch; font-size: 24pt; padding: 0; margin: 0; } .list>li { list-style-type: none; } <div class="container"> <ul class="list"> <li>001</li> <li>002</li> <li>003</li> <li>004</li> <li>005</li> <li>006</li> <li>007</li> <li>008</li> <li>009</li> <li>010</li> <li>011</li> <li>012</li> <li>013</li> <li>014</li> <li>015</li> <li>016</li> <li>017</li> <li>018</li> <li>019</li> <li>020</li> <li>021</li> <li>022</li> <li>023</li> <li>024</li> <li>025</li> <li>026</li> <li>027</li> <li>028</li> <li>029</li> <li>030</li> <li>031</li> <li>032</li> <li>033</li> <li>034</li> <li>035</li> <li>036</li> <li>037</li> <li>038</li> <li>039</li> <li>040</li> <li>041</li> <li>042</li> <li>043</li> <li>044</li> <li>045</li> <li>046</li> <li>047</li> <li>048</li> <li>049</li> <li>050</li> </ul> </div> 在你的CSS中 overflow: hidden; 或 overflow: scroll; 你可以为不同的显示使用 css @media 规则 对不同的显示使用@media 规则。 例子：- @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } }

在 iOS 中使用 WebShare API 共享图像失败

我尝试使用 WebShare API 在 iOS 和 Android 中共享图像。在 Android 中，我的代码运行完美，但在 iOS 中，在 WhatsApp 等某些应用程序中不共享图像，它仅共享 URL。我...

子域移动站点未在 iPhone 上显示

html5 网站配置是一个独立的桌面，重定向到子域移动网站，站点地图显示了这一点，并且在根目录中也有一个移动站点地图。手机网站没有...

iphone safari 中图像边缘出现黑线

我在解决我现在面临的问题时处于死胡同。我不知道这是不是一个错误，但这个问题只出现在 iPhone Safari 浏览器中。 这是屏幕截图：Iphone 12 （https://i.