flex-box布局，真机上显示布局错乱，并且缩放比存在问题。

Question

问题:
**页面用的flex-box布局的，手机模拟器里看显示效果正常，在真机上显示布局都乱了，而且缩放比有问题，内容被无限放大。如题请问怎么破？
手机模拟器iphone5实测如下：**

页面布局显示正常。

iPhone5 真机测试如下：

内容排版错乱，内容比例被无限放大。同时出现横向滚动条。

网友意见是让我在body上加overflow-y:hidden，实则解决不了布局和比例的问题。

上面效果，源码上是加了如下代码的：

<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no"/>

请问webapp的页面开发，标准解决办法是什么？
希望各位前辈，专家，大神能提供主流的方法，刚接触没多久，实在是晕了！

Answer 1

兼容了各种flex写法？？

没代码，目测是因为chrome的版本较高，支持最新的flex语法。真机上不支持这个语法。

最好用上autoperfixer进行css语法进行编译加下前缀

Answer 2

布局这样就是flex失效导致的， 加上-webkit前缀试试

Answer 3

完整代码贴上来看看

Answer 4

qq内置浏览器貌似不支持flex哈

Answer 5

QQ内置浏览器不支持最新的flex写法，貌似只支持老写法，你可以参考一下SUI Mobile的源码

Answer 6

先把所有rem转回px试试？

Answer 7

手机浏览器内核和pc端的不太一样，估计得分别处理吧，对于手机建议用rem布局.

Answer 8

前缀还是要写上的，-webkit-

Answer 9

兼容问题，把css代码提出来，如果用flex还不如用webkit-box