【问题标题】:Iframe expands when touched on mobile在移动设备上触摸 iframe 会展开
【发布时间】:2015-08-25 21:44:36
【问题描述】:

我目前正在http://axthehometax.com/ 建立一个网站 底部的插件 Rocket Lobby 是通过 iframe 加载的。它在桌面上运行良好,但在移动设备上,一旦您单击并浏览插件,它就会不断改变宽度,并打破“移动”视口。如果你回到结果中的那个点,它会缩小回来,但它仍然比最初开始时宽一点。

我什至不确定从哪里开始寻找为什么会发生这种情况。是 AX 网站,还是 Rocket Lobby,还是 iframe 和 bootstrap 不稳定的东西,或者..?如果这意味着什么.. 插件本身使用 jQuery.load 在 iframe 中加载新内容。

【问题讨论】:

  • 这只是一个很好的例子,说明了为什么 IFRAME 是可憎的。
  • 您可以选择插件使用不同的标签吗?
  • @JoshuaDannemann 好吧,我也为 Rocket Lobby 制作了网站。我本来希望使用其他东西,但是我对像这样的跨域东西的整体知识有限,并且只知道 iframe 可以工作。最初,我尝试只使用 jQuery.load,但那时我熟悉了不允许它工作的跨域策略的东西。
  • 有道理。如果没有设置 cross-domain-allow-origin 标头,那么 IFRAME 几乎是您唯一的选择。我想我有一个答案。
  • @JoshuaDannemann 在那张纸条上,我尝试设置跨域的东西,但它从来没有奏效。我假设这是否允许它工作,但事实并非如此,我做错了什么,但据我所知,它只是添加了那一行代码。相对缺乏经验,也许我忽略了一些简单的事情?

标签: jquery ajax iframe


【解决方案1】:

以使其在页面上良好呈现的方式约束 IFRAME 肯定不是最简单的开发任务,但只要您坚持使用 IFRAME,那么您可以尝试一些事情来让它呈现在手机上很好。不过很遗憾,这个问题可能没有任何错误或正确的答案。

首先,您应该探索使用视口元标记来帮助指导移动浏览器如何缩小页面。

<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">

更多信息在这里:

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

其次,使用 CSS 设置 IFRAME 样式的选项有限,但您可以使用 div 成功地对其进行约束。

第三,您应该在另一个 Stack Overflow 线程上探索此处提出的建议。如您所见,这个问题有很多投票,但没有接受的答案。您只需要尝试多种技术,看看哪种技术最有效。

how to properly display an iFrame in mobile safari

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-04-22
    • 2020-12-09
    • 1970-01-01
    • 1970-01-01
    • 2016-06-25
    • 1970-01-01
    相关资源
    最近更新 更多