Question

我正在使用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重置。

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

Page viewed on laptop

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

Page viewed on iPad

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

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

我不确定此问题还包括哪些内容，但如果有人可以提供帮助，我将非常感激。

由于

Answer 1

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

更确切地说，我确定可以正常工作，但不是因为某些原因我正在使用的配置。

这个问题的目的是让我的网站启动并运行，并使用随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" />

由于

'Unsemantic Grid'适用于桌面，而不适用于iPad

1 个答案: