0

私は最近ウェブデザインを始めました、そして私は決して専門家ではありません。私は自分でこのサイトを開発していますが、問題が発生しているようです。このサイトはすべてのブラウザでほぼ同じように見えます（まだ開発中です）。私はタブレットと携帯電話固有のCSSに取り組んできました。iPadのテストを行っている間（私はxCode iOS Simを使用しています）、ランダムな瞬間（通常はズームインしたとき）のように見える場合を除いて、メニューバーが機能していないことに気付きました。私は家族に物理的なiPadでこれをテストしてもらいましたが、彼らはナビゲーションバーをまったく使用できませんでした。このjsFiddleリンクには、ナビゲーションバーを実行するhtmlとcssが含まれています。私はこれに取り組むために次の数時間を費やし、私がそれを理解した場合はこの投稿を更新または削除しますが、そうでない場合は、助けていただければ幸いです。

これはhtmlのみで、cssが長すぎます。

<h2><a href="/">Auburn PC Repair<br>& Building</a></h2>
<div id="header-image">
    <h1></h1>
</div>

<nav id="buttonbar">
    <ul>
        <li id="services-button"><div class="buttonHighlight"></div>
            <a href="#" class="button"><h3>Our Services</h3><p>how can we help you</p></a>
            <ul>
                <li><a href="/services/pcrepair">PC Repair</a></li>
                <li><a href="/services/mobiledev">Mobile Device</a></li>
                <li><a href="/services/networking">Networking</a></li>
                <li><a href="/services/pcbuilding">PC Building</a></li>
            </ul>
        </li>
        <li id="contact-button"><div class="buttonHighlight"></div>
            <a href="/contact" class="button"><h3>Contact Us</h3><p>phone and email</p></a>
        </li>
        <li id="about-button"><div class="buttonHighlight"></div>
            <a href="/about" class="button"><h3>About Us</h3><p>all about us</p></a>
        </li>
    </ul>
</nav>

編集：ナビゲーションバーはwww.panic.com/codanavbarを中心に設計されました。iPadでも問題なく動作します。編集：現在の設定は、iOS以外のすべてのデバイスで機能します。

4

1 に答える 1

0

ナビゲーションはホバー イベントに依存して、メニュー コンテンツの表示をトリガーします。

ホバー イベントは、マウスが要素の上を移動することによってトリガーされます。

すべてではないにしてもほとんどの最新のスマートフォンやタブレットと同様に、すべての iOS デバイスなどのタッチ デバイスにはマウスがないため、ホバー イベントをトリガーする方法はありません。

CSS だけを使用して現代のタッチ デバイスで必要なことを実現することはできません。

JavaScript を使用して起動および応答できる、さまざまなタッチ関連のイベントがあります。CSS ベースのメニュー トリガー アプローチを選択するのではなく、ホバー イベントとタッチ イベントの両方を処理して目的のメニュー システムを生成する JavaScript ベースのアプローチを使用する必要があります。

于 2013-03-12T12:29:48.813 に答える