0

ユーザーがモバイル サイトにアクセスしているか、デスクトップ/タブレット サイトにアクセスしているかに応じて、異なる div を表示したいと考えています。

私はメディア クエリを使用して CSS イベントをトリガーし、サイズ変更、色の変更などを行いますが、ユーザーがモバイル サイトにいるときは、jQuery イベントとデスクトップ/タブレット サイトにいるときとではまったく異なる一連のイベントをトリガーしたいと考えています。

これは、サイズ変更イベントとは関係ありませんが (後で処理する必要があります)、むしろデバイスの初期幅と関係があります。iPad と iPhone (問題がある場合は 6) のビューポートの下のコードを使用すると、両方とも 980 になるようです。これは、iPhone と iPad を適切に区別して異なるイベントをトリガーできないことを意味します。

つまり、以下の window.width() 変数は、iPhone (横向きまたは縦向き) と iPad (横向きまたは縦向き) の両方で 980 を返します。デバイスのビューポート サイズの実際の幅に変更するために、以下を最適化する理由と方法について何か考えはありますか?

$(document).ready(function(){
$('#submenu').hide();
$('#mobileWebGallery').hide();
$('#webAbout').hide();
$('#webContact').hide();

var screen = $( window ).width();

if (screen > 667) {
    $('#mainmenu li:first').click(function(){
        $('#submenu').toggle('slow');
    });
}
else {
    $('#mainmenu li:first').click(function(){
        $('#mobileWebGallery').slideToggle('slow');
    });
    $('#aboutClick').click(function(){
        $('#webAbout').slideToggle('slow');
    });
    $('#contactClick').click(function(){
        $('#webContact').slideToggle('slow');
    });
}
});
4

2 に答える 2

0

これを解決するのに役立つスクリプトを見つけました。これはモバイル サイトの識別に役立ちます。http: //detectmobilebrowsers.com/で見つけることができます。

于 2014-11-09T22:07:07.023 に答える