mobile-safari 相关问题

有没有办法在iOS设备的Mobile Safari上使用window.onbeforeunload？

Apple 似乎已禁用 iOS 设备（iPhone、iPad、iPod Touch）的 window.onbeforeunload 事件。不幸的是，我找不到任何文档来说明为什么此事件在 Mobile Sa 中不起作用...

iOS Safari 双击按钮问题

我正在使用 Meteor 创建移动应用程序，但 Safari Web 视图中的按钮出现问题。似乎在完全随机的时间和按钮上，我被迫点击某物两次才能......

Flask 会话 cookie 未在 Safari 中设置

我的会话 cookie 遇到了奇怪的行为：在我的 Mac 上运行 Flask 应用程序，一切正常，并且在任何浏览器上都设置了 cookie。 但是，如果我在 Windows 服务器上运行它，

GeolocationPositionError：位置获取超时

我想在单击按钮时检索用户地理位置。 我使用 navigator.geolocation （纯js） 它工作了一段时间（使用下面的代码），无论好坏（用于第二次工作

iOS PWA：如何（重新）启用拉动刷新？

Stack Overflow 上有几个问题询问如何禁用下拉刷新，无论是在本机 iOS Safari 浏览器中访问其 Web 应用程序，还是作为独立（主屏幕）应用程序访问......

为什么内嵌PNG的SVG在Safari中不显示？

似乎是一个简单的问题，但我找不到答案。 SVG 像 XML 代码一样嵌入 HTML 文档中，而不是像带有标签的图像。 并且在除 Safari 之外的所有浏览器中都显示。 这里是...

当键盘打开时，移动 Safari 上 html 外部有空白

我在移动 Safari 上的 JavaScript 库中有一个非常奇怪的错误，我尝试用一个简单的示例重现该错误： 我有基本的 css 和 html： html, 身体 { 保证金：0； 填充：0； 字体-

在 iPhone 和 iPad Safari 浏览器上的新窗口中打开 Blob URL

我正在尝试根据服务器返回的响应生成PDF文件，并在新选项卡中打开该文件。它在所有浏览器的桌面上运行得很好，但在苹果设备上有问题（我......

NextJS 14 next/font/google 字体无法在 Safari iOS 上运行

我正在尝试在我的 NextJS 项目中使用 Google Fonts，它在 Chrome、Firefox 和 Safari Mac 上运行良好。但在 Safari iOS 上，它默认为 Times New Roman。 这是我的代码...

如何让 DeviceOrientationEvent 和 DeviceMotionEvent 在 Safari 上工作？

我正在尝试在我的网站上实现 DeviceOrientationEvent 和 DeviceMotionEvent 以实现 3D 效果。然而，控制台不会记录任何信息，显然 iOS 13 需要用户设置权限才能...

防止在 iOS 上的 HTML5 <video> 元素上滚动

我试图阻止 Mobile Safari 上包含 HTML5 视频元素的 Web 应用程序内的默认滚动。处理 document.ontouchmove 并调用 e.preventDefault() 一直是立场......

如何在 Safari Mobile 的新选项卡中打开 PDF

现在是 2023 年，我已经找到了一些关于同一主题的帖子。这些可以追溯到 2010 年。不幸的是，没有适合我的解决方案。 我的网站中有以下代码...

Mobile Safari 不会在视口之外渲染固定元素，除非它没有子元素

我正在尝试寻找解决移动 Safari 错误的方法...... 如果你拿一个位置：固定元素，高度：100vh，背景：绿色（称之为“抽屉”）并将其扔到移动设备

移动网络上的 iframe 上的按钮不可点击

我尝试将按钮绝对放置在 iframe 上，但当我在移动网络中查看我的应用程序时，没有注册按钮单击。相反，点击会在下面的 iframe 上注册...

在移动 Safari 上，键盘打开时，第一次点击提交按钮不起作用

我有一个带有提交按钮的表单。在 Mobile safari (iPhone) 上，当键盘打开并且您点击表单上的提交按钮时，它只会关闭键盘。 然后第二次点击提交表单。 该...

在 iPhone 网站上禁用水平滚动

我正在开发一个 iPhone 版本的 Wordpress 驱动网站，我想知道当该网站在 iPhone 的 Safari 中打开时是否有任何方法可以禁用水平滚动。现在，我...

DIV 元素在 iPhone Chome 和 Safari 上的错误位置中断 - 已确认解决方案

我正在构建一个简单的网络应用程序，但我一生都无法弄清楚它为什么要这样做。在桌面 Chrome 中，设置为 iPhone 12 Pro（我有 13 Pro），显示效果绝对完美...

如何在 iOS Safari 中获取当前屏幕方向？

我正在尝试获取 iOS 的当前屏幕方向，但是我的功能可以在 chrome 开发工具模拟器和桌面上运行，但在 iOS 上不起作用。 这是我的功能： 出口类型

有没有办法制作Safari专属的背景图片？

我的 Tumblr 博客现在使用带有背景附件的背景图像：fixed它在 Windows 和 Android 上完美运行但是，根据 caniuse.com（文章链接），此属性适用于...

在 Mobile Safari 上的 iFrame 中显示 PDF 时出现问题

在我们的 Web 应用程序中，我们使用以下代码行在 iframe 中显示 PDF 文档： <question vote="58"> <p>在我们的 Web 应用程序中，我们使用以下代码行在 <pre><code>iframe</code></pre> 中显示 PDF 文档：</p> <pre><code>&lt;iframe id=&#34;iframeContainer&#34; src=&#34;https://example.com/pdfdoc.pdf&#34; style=&#34;width:100%; height:500px;&#34;&gt;&lt;/iframe&gt; </code></pre> <p>这在所有主要桌面浏览器中都可以正常工作，PDF 的宽度可以缩放以适合 iFrame 的范围，并且可以使用垂直滚动条来查看文档中的所有页面。</p> <p>目前我无法让 PDF 在 Mobile Safari 中正确显示。在这种情况下，只有 PDF 的左上部分可见，没有任何水平或垂直滚动条来查看文档的其余部分。</p> <p>有人知道我在 Mobile Safari 中解决此问题的方法吗？</p> <p><strong>更新 - 2013 年 3 月</strong></p> <p>经过几个小时的搜索和实验，我可以得出结论，这个问题真是一团糟！有很多解决方案，但每一个都远非完美。我建议其他遇到此问题的人参考“<a href="https://www.magnolia-cms.com/blog/detail--strategies-for-the-iframe-on-the-ipad-problem-.html" rel="nofollow noreferrer">iPad 上 iFrame 问题的策略</a>”。对我来说，我需要注销这个问题，并为我们的 iPad 用户寻找另一种解决方案。</p> <p><strong>更新 - 2015 年 5 月</strong></p> <p>快速更新一下这个问题。最近我开始使用Google Drive查看器，它基本上解决了原来的问题。只需提供 PDF 文档的完整路径，Google 就会返回 PDF 的 HTML 格式解释（不要忘记设置 <pre><code>embedded=true</code></pre>）。例如</p> <p><a href="https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf" rel="nofollow noreferrer">https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf</a></p> <p>我使用它作为较小视口的后备，只需将上面的链接嵌入到我的<pre><code>&lt;iframe&gt;</code></pre>中。</p> </question> <answer tick="false" vote="11"> <p>我找到了一个新的解决方案。从 iOS 8 开始，移动 Safari 将 PDF 呈现为框架内 HTML 文档中的图像。然后，您可以在 PDF 加载后调整宽度：</p> <pre><code>&lt;iframe id=&#34;theFrame&#34; src=&#34;some.pdf&#34; style=&#34;height:1000px; width:100%;&#34;&gt;&lt;/iframe&gt; &lt;script&gt; document.getElementById(&#34;theFrame&#34;).contentWindow.onload = function() { this.document.getElementsByTagName(&#34;img&#34;)[0].style.width=&#34;100%&#34;; }; &lt;/script&gt; </code></pre> </answer> <answer tick="false" vote="5"> <pre><code>&lt;iframe id=&#34;ifamePdf&#34; type=&#34;application/pdf&#34; scrolling=&#34;auto&#34; src={&#34;https://docs.google.com/viewerng/viewer?url=&#34;+&#34;https://example.com/pdfdoc.pdf&#34;+&#34;&amp;embedded=true&#34;} height=&#34;600&#34; &gt;&lt;/iframe&gt; </code></pre> </answer> <answer tick="false" vote="4"> <p>我的解决方案是在移动设备上使用 Google Drive，并在大屏幕上使用 iframe 中嵌入的标准 pdf。</p> <pre><code>.desktop-pdf { display: none; } .mobile-pdf { display: block; } @media only screen and (min-width : 1025px) { .mobile-pdf { display: none; } .desktop-pdf { display: block; } } &lt;div class=&#34;outer-pdf&#34; style=&#34;-webkit-overflow-scrolling: touch; overflow: auto;&#34;&gt; &lt;div class=&#34;pdf&#34;&gt; &lt;iframe class=&#34;desktop-pdf&#34; scrolling=&#34;auto&#34; src=&#34;URL HERE&#34; width=&#34;100%&#34; height=&#34;90%&#34; type=&#39;application/pdf&#39; title=&#34;Title&#34;&gt; &lt;p style=&#34;font-size: 110%;&#34;&gt;&lt;em&gt;There is content being displayed here that your browser doesn&#39;t support.&lt;/em&gt; &lt;a href=&#34;URL HERE&#34; target=&#34;_blank&#34;&gt; Please click here to attempt to view the information in a separate browser window. &lt;/a&gt; Thanks for your patience!&lt;/p&gt; &lt;/iframe&gt; &lt;iframe class=&#34;mobile-pdf&#34; scrolling=&#34;auto&#34; src=&#34;https://drive.google.com/viewerng/viewer?embedded=true&amp;url=URL HERE&#34; width=&#34;100%&#34; height=&#34;90%&#34; type=&#39;application/pdf&#39; title=&#34;Title&#34;&gt; &lt;p style=&#34;font-size: 110%;&#34;&gt;&lt;em&gt;There is content being displayed here that your browser doesn&#39;t support.&lt;/em&gt; &lt;a href=&#34;URL HERE&#34; target=&#34;_blank&#34;&gt; Please click here to attempt to view the information in a separate browser window. &lt;/a&gt; Thanks for your patience!&lt;/p&gt; &lt;/iframe&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> </answer> <answer tick="false" vote="3"> <p>为了在 2021 年使用 Google 预览版，我必须执行以下操作。对上面的发布方式进行了一些小调整。</p> <pre><code>&#34;https://drive.google.com/viewerng/viewer?embedded=true&amp;url=&#34; + encodeURIComponent(pdfUrl) </code></pre> </answer> <answer tick="false" vote="2"> <p>尝试<pre><code>pdf.js</code></pre>也应该在移动Safari中工作：<a href="https://github.com/mozilla/pdf.js/" rel="nofollow">https://github.com/mozilla/pdf.js/</a></p> </answer> <answer tick="false" vote="-1"> <p>我也遇到了同样的问题。我发现通过将焦点设置在输入上（不适用于 div 标签），会显示 pdf。</p> <p>我通过添加隐藏输入并将焦点设置在其上来修复它。这项解决方案不会减慢应用程序的速度。</p> <pre><code>&lt;html&gt;&lt;head&gt; &lt;script&gt; $(document).ready(function () { $(&#34;#myiframe&#34;).load(function () { setTimeout(function () { $(&#34;.inputforfocus&#34;).focus(); }, 100); }); }); &lt;/script&gt;&lt;/head&gt; &lt;body&gt; &lt;div class=&#34;main&#34;&gt; &lt;div class=&#34;level1&#34;&gt;Learning&lt;/div&gt; &lt;input type=&#34;hidden&#34; class=&#34;inputforfocus&#34;&gt; &lt;div&gt; &lt;iframe src=&#34;PDF/mypdf.pdf&#34; frameborder=&#34;0&#34; id=&#34;myiframe&#34; allow=&#34;fullscreen&#34;&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </answer> </body></html>