“Unsemantic Grid”适用于桌面，而不是 iPad答案

【问题标题】：'Unsemantic Grid' works on desktop, not on iPad“Unsemantic Grid”适用于桌面，而不是 iPad
【发布时间】：2013-12-12 18:30:16
【问题描述】：

我正在使用Unsemantic Grid 来构建网站。当我在笔记本电脑上浏览网站时它可以工作，但当我在 iPad 上浏览网站时它不起作用 - 网格元素的行为类似于标准块元素并且位于不同的行上。

我从一个完全空白的网站开始查看是否可以找到问题，但我显然做错了 - 它仍然无法在 iPad 上运行。

这是现在测试页面的源代码（为代码喷溅道歉）：

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

<!-- proper HTML title -->
<title>title</title>

<!--[if lt IE 9]>
<script src="js/unsemantic/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" />
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="styles/unsemantic/unsemantic-grid-responsive-tablet-no-ie7.css" />
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="styles/unsemantic/ie.css" />
<![endif]-->

</head>

<body>

    <div class="grid-container">

    <div class="grid-100 mobile-grid-100">
            <h1 class="grid-100">Here's a heading</h1>
            <hr />
        </div>
        <div class="grid-25 mobile-grid-25">25% wide</div>
        <div class="grid-50 mobile-grid-50">50% wide</div>
        <div class="grid-25 mobile-grid-25">25% wide</div>

    </div>

</body>

</html>

style.css 不包含任何可以阻止它工作的内容 - 我已经从页面中删除了对它的引用，但它没有任何区别。

没有使用 css 重置。

在我的笔记本电脑上，页面呈现如下：

_{（来源：digitalformula.net）}

在我的 iPad 上，页面呈现如下：

_{（来源：digitalformula.net）}

Unsemantic demo 和源代码提供的演示都可以在桌面和 iPad 上正常工作 - 这就是它的设计目的。

我知道这是我缺少的东西，但我有某种心理障碍，找不到我忘记指定可能导致此问题的标记或 CSS。

我不确定这个问题还包括什么，但如果有人可以提供帮助，我将非常感激。

谢谢

【问题讨论】：

标签： html css grid css-frameworks unsemantic-css

【解决方案1】：

现在已解决。似乎问题出在针对mobile, tablet and desktop 的特殊Unsemantic.com 样式表中。

更准确地说，我确信它确实有效，但由于某种原因在我正在使用的配置中不起作用。

这个问题的目的是让我的网站启动并运行，并且使用 Unsemantic 网格提供的 'standard' 响应式样式表解决了这个问题。因此，我将此问题标记为已解决。

我所要做的就是上传到标准样式表并进行更改：

<link rel="stylesheet" href="css/unsemantic/unsemantic-grid-responsive-tablet-no-ie7.css" type="text/css" />

到这里：

<link rel="stylesheet" href="css/unsemantic/unsemantic-grid-responsive.css" type="text/css" />

谢谢

【讨论】：