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デモとソースで提供されるデモは、どちらもデスクトップと iPad で正常に動作します。これが設計の目的です。
これが欠けていることはわかっていますが、ある種のメンタルブロックがあり、指定するのを忘れていたマークアップまたは CSS がこれを引き起こしている可能性があります。
この質問に他に何を含めるかはわかりませんが、誰か助けていただければ幸いです。
ありがとう