Question

在对媒体查询应用以下内容时，它不适用于移动人像模式。它在移动横向模式和桌面上运行良好。这是我的代码

.post-table-new {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  display: table;
  color: #000
}

.post-table-new tr,
.post-table-new th,
.post-table-new td {
  border: 1.5px solid #000
}

.post-table-new {
  background-color: #fff
}

.post-table-new td,
.post-table-new th {
  display: table-cell;
  text-align: center;
  vertical-align: top
}

.post-table-new th {
  background-color: #fe074e;
  color: #fff
}

@media only screen and (max-width: 600px) {
  td.hide-col {
    display: none;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: collapse;
  }
  th.hide-col {
    display: none;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: collapse;
  }
}

<meta charset=UTF-8>
<meta name=viewport id=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

<table class="post-table-new">
  <tbody>
    <tr>
      <th>Heading</th>
      <th>Heding 2</th>
      <th class="hide-col">Heding 2</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td class="hide-col">3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td class="hide-col">6</td>
    </tr>
  </tbody>
</table>

在这里我想隐藏表格的一列。减小浏览器大小时，它在Desktop上可以正常工作。在移动横向模式下也可以正常工作，但在移动人像模式下不能工作。

Answer 1

// add orientation media query, landscape or portrait

@media screen and (max-width: 600px) , screen and (orientation:landscape)

媒体查询不适用于移动人像模式

1 个答案: