Question

我有一行在浏览器（any size）和手机（1440 x 2560 portrait mode）中显示以下内容：

但在平板电脑（1600 x 2560 portrait mode）上，它会显示以下内容：

我可以为它修复它，但是另一个不能按我的意愿显示。

问题

css中是否有办法确定我是否使用手机或平板电脑？或者，这是我可以处理的一般方法吗？

由于

HTML

<div class="person-job">
  <ion-row class="person-job-row">
    <p class="small-text-search small-text-by">by</p>
    <ion-col class="col-person-avatar">
      <ion-avatar item-right class="person-avatar" (click)="person(searchJobsParent.jobModel.person)">
        <img [src]="getPersonAvatar(searchJobsParent.jobModel)">
      </ion-avatar>
    </ion-col>
    <ion-col class="col-person">
      <button ion-button (click)="person(searchJobsParent.jobModel.person)" color="primary" clear small>
    <div *ngIf="searchJobsParent.jobModel.person" class="icon-text icon-text-displayname">{{searchJobsParent.jobModel.person.displayName}}</div>
  </button>
      <br>
      <ion-note class="small-text-search person-last-online">
        Active {{searchJobsParent.jobModel.person.lastAccessDate | amTimeAgo:true}} ago
      </ion-note>
    </ion-col>
  </ion-row>
</div>

CSS

.col-person-avatar ion-avatar img {
    float: left;
}

.col-person.col {
    white-space: nowrap;
    padding-left: 0;
}

.col {
    padding: 5px;
    position: relative;
    width: 100%;
    margin: 0;
    min-height: 1px;
    -webkit-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

ion-avatar, ion-thumbnail {
    display: block;
    line-height: 1;
}

.contracted-content {
    max-width: 369px;
    margin: 0 auto;
}

注意：.contracted-content是包含上述代码的更高级<div>。

UPADTE

我认为@Kamuran Sönecek是正确的，它不是media屏幕widt问题。我说这个的原因是因为我测试它的设计是：tablet: 8.40 inches 1600 x 2560 pixels和phone: 5.1-inch 2560x1440。此外，当我在桌面上调整浏览器大小时，无论大小多大，我都不会在平板电脑上看到重叠问题。

Answer 1

您可以查看Media Queries / MQ Devices您的网站似乎没有响应。

<强>桌面

<强>电话

示例： 桌面/平板电脑/手机

/*-- Common --*/

* {
  margin: 0;
  padding: 0;
}

p {
  font: normal 14px/1.4 Arial, Helvetica, sans-serif;
  margin: 6px 0 0;
  text-align: center;
}

.container {
  text-align: center;
}

.the-device {
  display: inline-block;
  margin: 20px auto;
}

.edge {
  background: #333;
}

.screen {
  background: #fff;
  position: relative;
}


/*-- Mobile --*/

.edge {
  border-radius: 15px;
  padding: 40px 8px 50px;
  position: relative;
}

.screen:before {
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10px;
  content: " ";
  display: block;
  height: 6px;
  margin-left: -35px;
  position: absolute;
  top: -24px;
  left: 50%;
  width: 70px;
}

.screen {
  height: 400px;
  width: 250px;
}

.screen:after {
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 10em;
  content: " ";
  height: 30px;
  margin: 10px 0 0 -15px;
  position: absolute;
  left: 50%;
  bottom: -41px;
  width: 30px;
}

.base {
  display: none;
}


/*-- Tablet --*/

@media all and (min-width: 700px) {
  .edge {
    padding: 50px 40px;
  }
  .screen {
    height: 600px;
    width: 450px;
  }
  .screen:before {
    height: 10px;
    margin-left: -5px;
    top: -30px;
    width: 10px;
  }
}


/*-- Desktop --*/

@media all and (min-width: 1024px) {
  .the-device {
    width: 90%;
  }
  .edge {
    padding: 3%;
  }
  .screen {
    height: 600px;
    width: auto;
  }
  .screen:before,
  .screen:after {
    display: none;
  }
  .base {
    background: #333;
    display: block;
    height: 60px;
    margin: 0 auto;
    width: 15%;
  }
  .base:after {
    background: #333;
    border-radius: 8px 8px 0 0;
    content: " ";
    height: 15px;
    margin: 60px 0 0 -20%;
    position: absolute;
    width: 40%;
  }
}

<p>Resize your browser viewport to see the device change. For best results, maximize the output window.</p>

<div class="container">
  <div class="the-device">
    <div class="edge">
      <div class="screen"></div>
    </div>
    <div class="base"></div>
  </div>
</div>

Answer 2

请使用以下媒体查询

@media screen and (min-width: 480px) {//Your code}
@media screen and (min-width: 768px) {//Your code}
@media screen and (min-width: 960px) {//Your code}
@media screen and (min-width: 1200px) {//Your code}

Answer 3

请使用CSS3 @media规则。例如：

@media screen and (min-width: 480px) {
    put your styles,its works only small screen
}

CSS平板电脑与手机尺寸

3 个答案: