0532-88983785 0532-68613670
青岛网站建设|青岛网站优化|青岛微信开发|青岛网站制作

解决麦客表单iphone/ipad下宽度100%兼容性问题

时间:2017-12-09 11:59 来源:青岛迅优网络 作者:admin 点击:3373次

  麦客是我见过比较简洁好用的表单制作工具,越来越多的企业都开始选用麦客表单作为资料收集工具。但是按照麦客表单的嵌入指引集成到移动端网页后,表单的宽度并不是按照100%显示。

  在表单的生成环节,下方会有“嵌入网站”的功能,一共有两大分类:嵌入网页和边缘弹窗。两类嵌入方法都是将指定的代码复制后,粘贴进自己的网页代码相应的位置即可使用,只是具体的表现形式不同,可以根据效果自行选择。
  按照麦客文档中提示,选用iframe代码嵌入的方式:

iframe代码

iframe代码相对要简单一点,iframe的原理简单来说就是在网页中画出一个指定大小的方框,然后在方框内展示要嵌入的网页内容。

解决麦客表单iphone/ipad下宽度100%兼容性问题

麦客提供的iframe嵌入代码中,嵌入表单的窗口高度是固定值,即上图下划线所标注的“800”(单位:像素),你可以根据自己表单的实际情况来修改这个数值。而参考代码设置iframe的宽度为100%,预期是宽度按实际设备宽度显示。
然而实际效果存在兼容性问题,在Android设备上显示正常,但是在IOS设备下显示宽度并不是按我们所想的100%满屏显示,而是宽度超过100%(iframe宽度(100%)没有起作用,超出外面div,宽度为实际宽度)。
iframe 变大的原因是,页面中元素即使已经 hidden 或者 display 为 none 了,在计算 iframe 大小时并不会忽略它们,这不知道算是IOS系统的优点还是缺点。
那么既然出现问题如何去解决呢?迅优小编把网站前端工程师的解决方法贴出来给大家分享一下:


通过上述JS处理,可以在页面加载后重新设置iframe宽度或者高度为实际需要的宽高。希望本帖对您有帮助。


  迅优网络是一家专注于网站建设网站优化网站设计网站制作网站托管代运营微信开发小程序开发的互联网科技公司。我们有完备的建站流程和专业的开发、设计人员,与客户深度合作并针对不同的客户提供专属的网站策划方案。
(责任编辑:admin)
网站建设定制

0532-88983785 / 0532-68613670

我要定制网站