在 iPad 上查看时忽略 CSS答案

【问题标题】：CSS ignored when viewing on an iPad在 iPad 上查看时忽略 CSS
【发布时间】：2015-03-31 09:33:42
【问题描述】：

这是我今天才遇到的一个问题，我想知道是什么导致了这样一个奇怪的问题。

我查看了一些示例网站，它们都遇到了同样的问题。我打开了 Chrome 开发者工具进行检查，与这些元素相关的 CSS 出现在“@media all”下。

基本上，在运行 iOS 8.1.2 的 iPad 上查看网站时，它似乎完全忽略了特定元素的 CSS。这是它在 iPad 上的样子（糟糕）：

http://i.imgur.com/wd4xnq4.png

现在这是我在 Windows 上使用 Chrome 时看到的（CSS 加载并使用，好版本...）：

http://i.imgur.com/3aMNPXF.png

我以前从未见过这种情况，并且在禁用 JS 的情况下没有加载 CSS，所以我完全被难住了。请帮忙。

编辑

这里是代码。我已经仔细检查过，当您单击它以显示它是当前选定的项目时，似乎添加了一个 .active 类。

编辑 2

这是所有代码，而不仅仅是按钮本身：

.product-view .product-collateral{
  width: 100%;
  float: left;
  margin:15px 0 0;
}

.product-view .product-collateral #product_tabs ul.r-tabs-nav{
  width: 100%;
  float: left;
}

.product-view .product-collateral #product_tabs ul.r-tabs-nav li{
  float: left;
  margin:0 5px 0 0;
}

.product-view .product-collateral #product_tabs ul.r-tabs-nav li a{
  padding:10px 15px;
  display: block;
  background-color: #bcbec0;
  color: #fff;
}

.product-view .product-collateral #product_tabs ul.r-tabs-nav li.r-tabs-state-active a{
  background-color: #fff;
  color: #333333;
}

.product-view .product-collateral #product_tabs .tab{
  width: 100%;
  float: left;
  background-color: #fff;
  padding:15px;
}

【问题讨论】：

更新了问题，抱歉。

标签： javascript ios css

【解决方案1】：

您使用什么浏览器在 iPad 上进行测试？谷歌浏览器也是？您是否对 CSS 使用特定于浏览器的规则？有些元素需要根据使用的浏览器多次声明。

【讨论】：

我在 iPad 上使用 Safari。

【解决方案2】：

我已经解决了这个问题。我不是最初从事此工作的开发人员，所以一开始就让人头疼。

事实证明，iPad 的分辨率直接介于移动视口大小和桌面视口大小之间，因此我只需将移动 CSS 放置在专为 iPad 设计的新媒体视口中即可。我会发布我的发现，但这应该可行（希望如此）。

编辑

是的，事实证明有一个媒体查询设置为很大，并且介于两个目标尺寸之间，而 iPad 尺寸正好在中间。

所以本质上它只是一个媒体查询之外的display: block;，这意味着所有的 CSS 都被遗漏了，因此只显示了文本。解决了！

【讨论】：