离子应用程序适用于浏览器，但不适用于手机

Question

我正在使用AngularJS在描述下创建弹出框。 我有两页;在第一页上，一切都很完美。 在第二页上，在移动设备上，单击单词时不会触发这些框。但它适用于桌面浏览器。 我知道问题出在我的CSS中（像往常一样），但我似乎无法找到它。

我目前的代码是这样的：

HTML

 <div class="contenu" >


        <div class="box1">
          <a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed"  style="color:#259B24"> MyRhoom </a>
          <div class="bordered" ng-show="collapsed" style="position: fixed; border-radius: 10px; box-shadow: 5px 5px 10px #000; background-color: #FBC02D; " >I am description</div>
        </div>

        <div class="box2">
          <a href="#" ng-model="collapsed2" ng-click="collapsed2=!collapsed2"  style="color:#FBC02D"> Talent </a>
          <div class="bordered" ng-show="collapsed2" >I am description</div>
        </div>


    <div  align="center">
        <img src="img/Image2.jpg" class="im">
    </div>

    <div>
        <div class="box3">
          <a href="#" ng-model="collapsed3" ng-click="collapsed3=!collapsed3"  style="color:#FBC02D"> WTR </a>
          <div class="bordered" ng-show="collapsed3" >I am description</div>
        </div>
    </div>



      <div class="box4">
        <a href="#" ng-model="collapsed4" ng-click="collapsed4=!collapsed4"  style="color:#F44336"> Skype </a>
        <div class="bordered" ng-show="collapsed4">I am description</div>
      </div>

      <div class="box5">
        <a href="#" ng-model="collapsed5" ng-click="collapsed5=!collapsed5"  style="color:#259B24"> Ulysse </a>
        <div class="bordered" ng-show="collapsed5">I am description</div>
      </div>

      <div class="box6">
        <a href="#" ng-model="collapsed6" ng-click="collapsed6=!collapsed6"  style="color:#F44336"> Egencia </a>
        <div class="bordered" ng-show="collapsed6" >I am description</div>
      </div>


  </div>
</div>

CSS

.box1 {

position: absolute;
display: inline-block;
left: 3%;
top: 70%;
font-size: 14pt;

}
.box2 {
position: absolute;
display: inline-block;
left:72%;
top: 60%;
font-size: 14pt;

}

.box3 {

position: absolute;
display: inline-block;
left: 5%;
top: 80%;
font-size: 14pt;

}

.box4 {

position: absolute;
display: inline-block;
left: 5%;
top: 60%;
font-size: 14pt;

}
.box5{

position: absolute;
display: inline-block;
left: 72%;
top: 70%;
font-size: 14pt;

}

.box6 {

position: absolute;
display: inline-block;
left: 72%;
top: 80%;
font-size: 14pt;

}
.contenu .bordered {
position: fixed;
  border-radius: 10px;
  box-shadow: 5px 5px 10px #000;
  background-color: #FBC02D; 

}

给我这个：

当我将.box1, .box2等更改为.contenu.box1时，我会将其工作，但不会保留布局。

我该如何解决这个问题？