1

我正在使用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 上，页面呈现如下：

在 iPad 上查看的页面
（来源：digitalformula.net）

Unsemantic 演示和源提供的演示都可以在台式机和 iPad 上正常工作 - 这就是它的设计目的。

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

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

谢谢

4

1 回答 1

2

现在已解决。似乎问题出在针对移动设备、平板电脑和台式机的特殊Unsemantic.com样式表中。

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

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

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

<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" />

谢谢

于 2013-11-27T22:29:13.997 回答