Question

我正在尝试在移动设备等小型设备中隐藏桌面上的某些列，以制作响应式页面。它可以在我的桌面上使用Chrome和Firefox工作正常但是只要我在Android手机上使用下面的简单示例（使用Chrome），即使我的屏幕远小于800，我的所有列都会出现。我不能看到任何明显的原因，为什么它不起作用。有什么指针吗？

<html>
<head>
<style>
@media(max-width: 800px) {
    th.nomobile, td.nomobile{
        display:none;
        width:0;
        height:0;
        opacity:0;
        visibility: collapse;
    }
}
</style>
</head>

<body>
<table cellpadding="7" cellspacing="1" class="border" width="100%">
 <tr>
  <th><strong>Col1</strong></th>
  <th class="nomobile" style="width: 75px;"><strong>Col2</strong></th>
  <th class="nomobile" style="width: 75px;"><strong>Col3</strong></th>
  <th style="width: 225px;"><strong>Col4</strong></th>
 </tr>
</table>
</body>
</html>

Answer 1

您可能错过了html标头中的viewport元标记，从下面的简单viewport元标记开始，并根据您的需要对其进行自定义：

<meta name="viewport" content="width=device-width, initial-scale=1.0;">

在此处查找更多信息：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 2

如果您不包含视口元标记：

<meta name="viewport" content="width=device-width">

您的媒体查询将看到屏幕的实际像素（720x1280），而不是css /显示像素（360x640）。在横向上，这将触发或不触发查询。

CSS @media指令无法在移动浏览器上运行

2 个答案: