js创建CSS样式在iPhone6下的适配

近期的一个项目是做一个微信公众号，其中有一个关于图片商品列表的显示，左侧是商品图片，右侧是商品基本信息，用的是如下代码段予以实现：

var div2 = document.createElement("div);

var img = document.createElement("img");

img.src = "../image/wine/"+array["pimg1"];

img.style = "width:25px;height:75px;margin-left:1.25rem;display:block";

div2.appendChild(img)

部署之后，发现在Android下是正常的，但在iPhone下测试布局不对，如下图所示：

Android手机下的显示效果

iPhone手机下的错误显示效果

上面第一张图是Android的测试图，效果正常，图片在左侧区域居中显示，商品信息在右侧显示，其中价格和积分中间有一定的间隔。

第二张效果图是在iPhone6下的测试结果，图片挤压严重，在左侧偏右位置显示，且积分与金额之间的间隔消失。

经过摸索，发现将上面代码中img.style这一段改成如下方式可以解决这个问题，即将img.style的具体内容逐条展开，方可被iPhone识别，效果图如下所示：

img.style.width = "25px";

img.style.height = "75px";

img.style.margin = "0 auto";

img.style.display = "block"

iPhone下的正确显示效果

这样，就较好地解决了使用js创建CSS样式在iPhone下显示异常的问题，亲证有效。

感谢阅读此文，欢迎关注“斯沃勒科教工作室”，期待与您一起分享实用安全知识和代码开发技巧，评论必回哦！