3

私は画像ギャラリーを持っています。画像は iPhone の画面を埋めるのに十分な大きさです。

画像はリンクでもあるので、ご想像のとおり、iPhone ではスクロールが非常にイライラすることになります。

cssだけでこれを防ぐ方法はありますか?

そうでない場合、この問題に対する最も簡単な解決策は何でしょうか?

ありがとう！

4

3 に答える 3

1

Javascript を使用することをお勧めします。しかし、CSS のみを使用する方法を見つけました。最初のステップでは、クライアント ブラウザーを識別する必要があります。HTML ファイルの HEAD セッションに以下のコードを追加するだけです。

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

クライアントが iphone でブラウザーを使用している場合にのみ、「iphone.css」のコンテンツが読み込まれます。

このファイル「iphone.css」で、リンクを無効にするクラスを作成する必要があります。 

.disableLink {
   pointer-events: none;
   cursor: default;
}

ギャラリーの HTML コードで、リンクに参照を追加します。

<a href="link.html" class="disableLink"> IMAGE </a>

これらの手順は iPhone/iPod touch でのみ機能しますが、私の 2 番目のリファレンスを見ると、iPhone 4/iPod touch 4G に適応する方法がわかります。

于 2012-07-17T19:28:46.907 に答える
0

のアイデアは気に入っていますが、十分にサポートされていないpointer-events: none;ため、使用しません。

モバイルデバイスを特定の画面サイズを持つものとして定義している場合、次のようにします。

$(function () {
    var mobile = ($(window).width() < 481);
    $('#image-gallery').find('a').click(function (e) {
        if (mobile)
            e.preventDefault();
    });
});

ただし、「モバイル」を別の何か、たとえばタッチイベントをサポートするブラウザとして定義しようとします。

于 2012-07-17T20:01:55.307 に答える
0

CSS ベースのソリューションはないと思います (CSS は実際には HTML 要素の動作を変更するようには設計されていません)。

ページの読み込み時に JavaScript を使用してブラウザのビューポートの幅を確認し、ビューポートが電話サイズの場合はリンクを見つけて無効化/削除できます。

PPK の「A Tale of Two Viewports」の記事を参照して、状況に応じた幅を把握するためにチェックする JavaScript プロパティを見つけてください (頭の中で思い出せるほど十分なモバイル開発を行っていません)。

于 2012-07-17T19:18:26.043 に答える