Cyber码农
Cyber码农
  • 发布:2017-06-27 09:30
  • 更新:2020-09-01 15:24
  • 阅读:4186

打包成iOS的APP后,界面样式就错乱了,而其它各种环境都正常,咋回事?

分类:MUI

iOS的APP下界面:
有问题界面

而iOS系统下用Safari浏览器或其它浏览器打开是正常的,安卓系统下不管是APP还是浏览器,都是正常的,正常界面应该是这样:
正常界面

界面代码:

<body>  
	<header id="header">  
		<div id="iback" class="nvbt iback" onclick="back()"></div>  
		<div class="nvtt">商家预充值</div>  
	</header>  
	<div class="mui-content-padded">  
		<div id="dcontent" class="dcontent">  
			<center>联盟商家业务推广费帐户预充值</center>  
			<br/>  
			<p id="info" style="padding: 0 1em;text-align:left;" class="mui-hidden">支付通道信息:  
				</p>  
			<div style="padding: 0.5em 1em;">  
				<hr color="#EEE" />  
			</div>  
			请输入充值金额:  
			<div class="mui-numbox" style="width: 160px;" data-numbox-step='100' data-numbox-min='0.01' data-numbox-max='5000'>  
				<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>  
				<input id="total" class="mui-input-numbox" type="number" value="100" />  
				<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>  
			</div>  
			<br/>  
			<br/>  
			<div id="offlinepay" class="button"><span class="mui-icon-extra mui-icon-extra-card"></span> 线下转帐充值</div>  
  
			<!--<div class="button" onclick="clicked('payment_iap.html')">Apple IAP</div>-->  
		</div>  
	</div>  
	<div class="mui-content-padded">  
		线下转账支付方式:  
	</div>  
	<div class="mui-card">  
		<ul class="mui-table-view">  
			<li class="mui-table-view-cell mui-collapse">  
				<a class="mui-navigate-right" href="#">A.支付宝:</a>  
				<div class="mui-collapse-content">  
					提示:请先转账后再点击上面的【线下充值】按钮<br/> A.支付宝:  
					<div id="pay_alipay"><img src="http://www.100bch.com/mobile/themes/mall/default/styles/default/images/m_alipay_qcode.png" width="100%" style="max-width:300px"></div>  
					<br/>  
					<span style="color:#ff0000;">* 注意:扫描二维码付款或通过银行转帐后,请致电400-9955-990为您办理充值,如果不联系可能我们无法核实是哪一个商家付了款而耽误您充值。<br/></span><br/>  
				</div>  
			</li>  
			<li class="mui-table-view-cell mui-collapse">  
				<a class="mui-navigate-right" href="#">B.微信:</a>  
				<div class="mui-collapse-content">  
					提示:请先转账后再点击上面的【线下充值】按钮<br/> B.微 信:  
					<div id="pay_weixin"><img src="http://www.100bch.com/mobile/themes/mall/default/styles/default/images/m_weixin_qcode.png" width="100%" style="max-width:300px"></div>  
					<br/>  
					<span style="color:#ff0000;">* 注意:扫描二维码付款或通过银行转帐后,请致电400-9955-990为您办理充值,如果不联系可能我们无法核实是哪一个商家付了款而耽误您充值。<br/></span><br/>  
				</div>  
			</li>  
			<li class="mui-table-view-cell mui-collapse">  
				<a class="mui-navigate-right" href="#">C.银行转帐 </a>  
				<div class="mui-collapse-content">  
					提示:请先转账后再点击上面的【线下充值】按钮<br/> C.账户:   
					<br/>  
				</div>  
			</li>  
		</ul>  
	</div>  
	<div class="mui-content-padded">  
		<span style="text-align: right;">如有问题请联系客服:400-9955-990</span><br/><br />  
	</div>  
	<div id="output" class="mui-hidden">  
  
	</div>  
</body>

求帮忙填坑啊~~~非常感谢!

2017-06-27 09:30 负责人:无 分享
已邀请:
Cyber码农

Cyber码农 (作者)

经排查,这个问题是由于MUI自带的js/common.js文件导致iOS APP出现样式问题的,把common.js文件去掉,样式马上变正常了,但不用这个文件又不行,这个页面是用于支付的。
有官方的人站出来说句话吗?

Trust

Trust - 少说废话

mui相关的资源,都是以mui开头的,并没有common.js文件。
你这个common.js是哪里来的?是不是hello h5+示例工程例子用的那个?

  • Cyber码农 (作者)

    是的,就是hello h5+示例工程例子的那个,因为要做支付接口嘛,所以套用了那个例子页面payment.html,就发现了这个问题


    2017-06-28 09:47

Cyber码农

Cyber码农 (作者)

@DCloud_客服_Trust 是的,就是hello h5 示例工程例子的那个,因为要做支付接口嘛,所以套用了那个例子页面payment.html,就发现了这个问题

y***@126.com

y***@126.com - 脉多多

所以 问题解决了吗

该问题目前已经被锁定, 无法添加新回复