代码之家  ›  专栏  ›  技术社区  ›  brianyates

使用iphone safari的youtube iframe页面上的链接和按钮响应性较差

mobile-safari youtube iframe ruby-on-rails html
  •  0
  • brianyates  · 技术社区  · 8 年前

    我有一个RoR网页,使用YouTube iFrAME,它在桌面浏览器上完全正常工作,但由于某些原因,当在iPhone上使用Safari时,页面上的其他按钮和链接不太响应,并且可以用拇指点击几次“点击”。页面在大多数情况下仍然运行良好,但我希望确保一个最佳的移动用户体验。是否有一些iFrAMS或YouTube链接混淆了“可点击”其他按钮/链接在iPhone上的同一页面?为了简洁起见,我不会共享页面的完整源代码,但这里有一个iframe和parent div元素的片段。 

        <div class="m-auto m-width-800">
      <div class="embed-responsive embed-responsive-16by9 workout-video">
        <iframe class="workout-iframe embed-responsive-item" src="https://youtube...blah" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>

    再说一次,一切都还正常,我只是想知道为什么在iphone safari上点击页面上的其他链接和按钮会很困难?在我的整个web应用程序中,唯一在iphone上表现出这种奇怪行为的页面就是那些带有youtube iframe元素的页面,所以我觉得这一定是原因……有什么想法吗?

    1 回复  |  直到 8 年前
        1
  •  0
  •   elijahbuck    8 年前

    当我开始问基本相同的问题时,我偶然发现了这个问题。我会把我最初的答案用那种形式写下来,因为我已经写过了:咧嘴笑:.

    我有一个网站,有一些内容,一些链接,然后在网页的一部分有一个嵌入谷歌表单在iframe。

    在手机上(我只测试了iPhone),我发现最初点击链接只需要一个“软”点击。然而,在点击iframe然后向上滚动到链接之后,这些链接需要“更难”点击。

    (一开始,我以为我的手指一定有毛病!)

    我可以通过向页面添加以下javascript来解决此问题: 

    <script>(function(d){
  // fix "hard" link clicks caused by iphone fixation on iframe
  d.getElementsByTagName("BODY")[0].ontouchstart = function() {
        d.getElementsByTagName("BODY")[0].focus()
      }
}(document))</script>

    这将焦点返回到 <body> 每当你触摸 <body &。这有效,但这是个好办法吗?有更好的解决办法吗?

    https://iframe-iphone-focus.glitch.me/ 演示问题和解决方法。

    推荐文章
    aarona  ·  Rails迁移批量更新change_column_default
    1 年前
    cluster1  ·  采取独立的新行动的好处是什么?
    1 年前
    Robert  ·  使用JSON或哈希时,将NULL替换为NIL
    1 年前
    cluster1  ·  Rails form_with-helper:什么是:作用域?
    2 年前
    stevec Zxeenu  ·  如何在rails控制台中禁用寻呼机,以便将整个结果打印到控制台?
    2 年前
    Fred Willmore  ·  Rails控制器不呈现任何模板
    2 年前
    Diogo Amaral  ·  实现API请求的正确方式
    2 年前
    Meknassih  ·  在控制器方法中分配给模型没有任何作用
    2 年前
    Michael Ding  ·  Rails上的默认会话到期问题
    2 年前
    Flávio  ·  基于另外两个生成数组
    2 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号