"Unsemantic Grid" работает на рабочем столе, а не на iPad

Я использую 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 используется.

На моем ноутбуке страница выглядит так:

Страница просматривается на ноутбуке

На моем iPad страница выглядит так:

Страница просматривается на iPad

Демонстрация Unsemantic и демонстрация, поставляемая с исходным кодом, отлично работают на настольных компьютерах и iPad - вот для чего они предназначены.

Я знаю, что это то, чего мне не хватает, но у меня какой-то ментальный блок, и я не могу найти, какую разметку или CSS я забыл указать, что может быть причиной этого.

Я не уверен, что еще включить в этот вопрос, но если кто-то может помочь, я был бы очень признателен.

Спасибо

Источник

1 ответ

Теперь это решено. Кажется, что проблема заключается в специальной таблице стилей http://www.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" />

Спасибо

Источник
Другие вопросы по тегам