Question

一切都在其他平台上完美运行，但iPad给我带来了麻烦。

在Safari上，带有日期和评论的圈子会在内容下滑动。在chrome上，根本没有圆圈，左边的一大堆元素都搞砸了。

使用flexbox

html of it

<div class="postpreview">                   
    <div class="psto"></div>   
    <div class="datencomments"></div>
</div>

此外无论内容是什么

和css

.postpreview {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-top: 80px;
max-width: 90%;
}

.psto {
-webkit-box-flex: 5;
-moz-box-flex: 5;
-webkit-flex: 5;
-ms-flex: 5;
flex: 5;
max-width: 700px;
}

.datencomments {
-webkit-box-flex: 2;
-moz-box-flex: 2;
-webkit-flex: 2;
-ms-flex: 2;
flex: 2;
vertical-align: top !important;
margin-top: 15px;
margin-left: 40px;
}

@media screen and (max-width: 801px)
and (orientation : portrait){
.postpreview {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-orient: vertical;
 -moz-box-orient: vertical;
 -webkit-box-direction: reverse;
 -moz-box-direction: reverse;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 margin-top: 16px;
 }
}

 @media screen and (min-width: 550px) {
 .postpreview {
 margin-top: 16px;
 }
 }

 @media screen and (max-width: 832px)
 and (orientation : portrait){
 .psto {
 -webkit-order: 2;
 -moz-order: 2;
 -ms-order: 2;
 margin-top: -30px;
 float: left;
 }
 }


@media screen and (max-width: 832px)
and (orientation : portrait){
 .datencomments {
 -webkit-order: 1;
 -moz-order: 1;
 -ms-order: 1;
 margin-top: 70px;
 }
}

直播链接在这里 http://soloveich.com/pr6/blog/

另外，这里有截图 http://s018.radikal.ru/i526/1402/fc/8aa0cb2ccbe9.jpg

P.S。有没有人知道在不同设备上进行移动网站测试的任何服务，哪些有ipad可用？刚刚在设备上运行了试用时间，并且在我完成这个项目之前无法真正买到它。

iPad布局瘫痪

0 个答案: