javascript - flex-box布局,真机上显示布局错乱,并且缩放比存在问题。
迷茫
迷茫 2017-04-10 17:58:45
[JavaScript讨论组]

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


页面布局显示正常。

iPhone5 真机测试如下:

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

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

上面效果,源码上是加了如下代码的:


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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(9)
怪我咯

兼容了各种flex写法??

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

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

巴扎黑

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

PHP中文网

完整代码贴上来看看

大家讲道理

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

大家讲道理

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

天蓬老师

先把所有rem转回px试试?

黄舟

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

PHP中文网

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

巴扎黑

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号