mobile-safari 相关问题

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>

iOS Safari 字体上的这些奇怪的矢量线是什么？查看屏幕截图和片段

在 iOS Safari 中的移动网站上做一些工作时，我放大并注意到一些文本上有这些奇怪的矢量线。这是在 iOS 16.6.1 上。这是我正在使用的 CSS 字体堆栈： 字体系列：'Segoe...

防止iOS mobile safari进入空闲/自动锁定/睡眠状态？

在 iOS 应用程序中，您可以设置 application.idleTimerDisabled = YES 以防止手机自动锁定。 我需要在移动 Safari 中为 Doodle Jump 这样的游戏执行此操作，用户可能无法触摸...

为什么iOS 15 safari单指向后滑动时不重新加载网页？ [重复]

我在页面A中有一个按钮，当按钮被点击时页面会显示“已点击”，并跳转到另一个页面B，但是当向后滑动时“已点击”仍在页面A中，页面A不相关。 ..

用户在移动 Safari 上离开页面时暂停声音

我正在应用程序的后台播放音频，但我想在用户最小化或 Safari 进入后台时停止。 我已经尝试过工作 element.onfocus 。 我也尝试过使用窗口。

有谁知道为什么 Swiper JS 分页子弹在 iOS 设备上拉伸？

swiper js 分页点在桌面 chrome 和 safari 浏览器上看起来和功能都很完美，但是在我的 iPad 或 iPhone safari 浏览器上时，分页点会拉伸，忽略宽度/高度...

背景滤镜在 Safari IOS 上不起作用

我正在从事网络投资组合工作，我为移动视图实现了一个下拉菜单。该下拉菜单具有使用背景过滤器属性制作的模糊背景。它在所有浏览器中都能完美运行

网页在 Mobile Safari 中离开屏幕

使用最简单的 HTML，页面比屏幕还宽。 使用最简单的 HTML，页面比屏幕还宽。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> i love javascript </body> </html> 我已经在 Xcode 附带的模拟器应用程序以及我自己的 iPhone 12 mini（运行 iOS 17.1）上对此进行了测试。 iOS Chrome 应用程序可以正常渲染页面，因此这是移动 Safari 的问题。 我已经尝试了一切：width: 100%，width: 100vw，overflow: hidden，position: fixed; top: 0; bottom: 0; right: 0; left: 0;。这些都没有任何效果。有没有人找到解决这种烦人行为的方法？ body { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); background: #000; width: 100%; }

如何在 iOS 13+ Safari 中禁用正文滚动（当保存为 PWA 到主屏幕时）？ [重复]

问题： 我希望 iOS 13 Safari 上的 body 元素不滚动。这意味着没有滚动，也没有弹性反弹（溢出滚动）效果。 我有两个彼此相邻的元素，我...

overflow:hidden 是否适用于 <body> 在移动 Safari 上工作？

overflow:hidden 应用于 在 iPhone Safari 上是否有效？看来不是。 我无法在整个网站上创建包装器来实现这一目标...... 你知道解决办法吗？ 示例：我有一个很长的...

如何在 Safari iOS13+ 中从 PWA 下载图像

我正在尝试实现从PWA下载图像。我在用 下载图片&l...

打开虚拟键盘时，iOS 上的 Safari 会滚动到 <html> 元素之外

尝试一下： 在 iOS（设备或模拟器）上的 Safari 12 中打开此 codepen。 集中输入。虚拟键盘应该打开。 现在一直滚动到页面底部。 你应该能够

Iphone safari 无法在键盘打开时调整视口大小

Mobile safari 在键盘弹出时不会更新 window.innerHeight。 （至少在9.3.5中，并且有几个像这样的答案，有评论说在ios 8.2中损坏） 苹果