Question

我在iOS设备和Windows PC上测试了我的网站应用程序，以及Google Chrome设备工具栏。在我的Windows PC和Google Chrome设备工具栏上使用网站应用程序时，iFrame中的任何固定元素都是固定的。但是，iFrame中的任何固定元素都不会在iOS设备上修复。显然，这可能是iOS设备所具有的错误，并且想知道是否存在解决方案，以便假设处于固定位置的元素实际上已在iOS设备上修复。这是我的CSS代码：

:~ $ sudo mmcli -m /org/freedesktop/ModemManager1/Modem/0 --signal-get
 error: modem has no extended signal capabilities

:~ $ sudo mmcli -m /org/freedesktop/ModemManager1/Modem/0 --command=AT+CSQ
error: command failed: 'GDBus.Error:org.freedesktop.ModemManager1.Error.Core.Unauthorized: Cannot send AT command to modem: operation only allowed in debug mode'


/org/freedesktop/ModemManager1/Modem/0 (device id 
'dd26a5483d051c6e25a7ca10f4d36a94791c7ebf')
-------------------------
Hardware |   manufacturer: 'Sierra Wireless, Incorporated'
       |          model: 'MC7304'
       |       revision: 'SWI9X15C_05.05.16.02 r21040 carmd-fwbuild1 
2014/03/17 23:49:48'
       |      supported: 'gsm-umts, lte'
       |        current: 'gsm-umts, lte'
       |   equipment id: 'unknown'
 -------------------------
  System   |         device: 
'/sys/devices/platform/soc/3f980000.usb/usb1/1-1/1-1.5'
       |        drivers: 'qmi_wwan, qcserial'
       |         plugin: 'Gobi'
       |   primary port: 'ttyUSB2'
       |          ports: 'ttyUSB0 (qcdm), ttyUSB2 (at), wwan0 (net), 
wwan1 (net)'
-------------------------
 Numbers  |           own : 'unknown'
 -------------------------
 Status   |           lock: 'none'
       | unlock retries: 'unknown'
       |          state: 'connected'
       |    power state: 'on'
       |    access tech: 'lte'
       | signal quality: '0' (recent)
 -------------------------
 Modes    |      supported: 'allowed: 2g, 3g, 4g; preferred: none'
       |        current: 'allowed: 2g, 3g, 4g; preferred: none'
 -------------------------
 Bands    |      supported: 'unknown'
       |        current: 'unknown'
 -------------------------
 IP       |      supported: 'ipv4, ipv6, ipv4v6'
 -------------------------
 3GPP     |           imei: 'unknown'
       |  enabled locks: 'none'
       |    operator id: 'hidden'
       |  operator name: 'hidden'
       |   subscription: 'unknown'
       |   registration: 'home'
 -------------------------
 SIM      |           path: '/org/freedesktop/ModemManager1/SIM/0'

 -------------------------
  Bearers  |          paths: '/org/freedesktop/ModemManager1/Bearer/0'

Answer 1

如果是我，我会创建一个有针对性的测试来证明这些理论并展示它们。

我会创建一个具有固定位置元素的迷你网站，以及一个绝对元素（为了更好的衡量标准）

http://codepen.io/sheriffderek/pen/xqaYqM

然后我会创建另一个迷你网站，其中包含上一个网站示例源代码的iframe（在本例中为调试CodePen版本）http://s.codepen.io/sheriffderek/debug/xqaYqM

http://codepen.io/sheriffderek/pen/GWXQBN

将此链接发送到您的手机： http://s.codepen.io/sheriffderek/debug/GWXQBN

然后我会使用它的调试版本在iPhone或其他任何地方进行测试。

<header>
    <h1>iFrame example with fixed position and absolute position to check on iOS and other devices</h1>
    header.... 

    <div class='fixed-thing'>fixed-thing</div>
</header>

<main>
    main

    <div class='absolute-thing'>absolute-thing</div>
</main>

然后......

<main>
    <iframe src='http://s.codepen.io/sheriffderek/debug/xqaYqM' frameborder='0'></iframe>
</main>

对我来说，一切似乎都很正常。

这可以帮助您解释一下这个问题吗？您是否在代码中使用了transform: translate？为什么要将iframe放在绝对容器中？

看来iFrame在iOS上自动全高，无论你设置它是什么，所以没有滚动，这意味着固定甚至无法检测到......请参阅此主题：How to get an IFrame to be responsive in iOS Safari?

iFrame中的固定元素在iOS设备上不固定

1 个答案: