3

単一ページの Web サイトに JQVMap をセットアップして、iPhone でマップを正しく表示しようとしていますが、私の人生では、何が問題なのかわかりません。おそらくそれは応答性が高く、「箱から出して」スケーリングしますが、メディアクエリを試し、サンプルページで見つけたサイズ変更スクリプトをいじりましたが、うまくいきませんでした。

開発者のページ ( http://jqvmap.com/ )の指示に従って世界地図の div を設定し、幅と高さをインラインで設定しました。 

<div id="vmap" style="width: 600px; height: 400px;"></div>

開発者のページ ソースを見ると、彼はインラインの幅と高さを設定しておらず、スクリプトを使用してページ コンテナーに基づいて幅と高さを設定しようとしています。

 var map_width = (jQuery('#pages').width());

    if(map_width > 480)
    {
        map_width -= 40;
    }

    jQuery('.map').css({ 'width': map_width + 'px', 'height': (map_width*.75)+ 'px' });
    jQuery('#pages dd, #pages p, #pages div.inner').css({ 'width': map_width + 'px' });

私はスクリプティングの完全な初心者ですが、物事を突き刺して喜んでおり、コンテナdivに従って幅と高さを変更するためにsvgマップを取得することができました.iPhoneではまだ切断されていました.

css も使用してみましたが、メディア クエリでマップのコンテナー div の最大幅と最大高さを設定しましたが、これはうまくいきませんでした。マップはまだコンテナーよりも大きく、途切れていました。

レスポンシブ用のこれらのメタ タグがあります。

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

ここで何が欠けていますか？ドキュメントによると、これは「箱から出して」再スケーリングする必要があるようで、ブラウザウィンドウを再スケーリングすると、マップは満足しているように見えます.iPhoneでスケーリングしないのはなぜですか? ヘルプ/指示/例は大歓迎です!

また、これを .htaccess ファイルに追加しようとしました: addtype image/svg+xml .svg

私のiPhoneとiPadはIOS 8を実行しています。

4

2 に答える 2

5

jqvmap プラグインの「スケーラブル」な側面は、ベクター グラフィックスの使用を指します。これは、自動的にサイズが変更されたり、ビューポートの寸法の変更にすぐに応答したりすることを意味するものではありません。

マップの幅が高さの 1.4 倍であるレスポンシブ Twitter Bootstrap レイアウトで米国のマップを使用するために、次のようにしました。

1) #vmap マークアップからインラインの幅と高さの属性を削除します。

<div class="some-parent-element">
  <div id="vmap"></div>
</div>

2) 親要素の幅を取り、それを #vmap 幅に割り当てる関数をサイトの JavaScript ファイルに追加します。

function sizeMap() {
    var containerWidth = $('.some-parent-element').width(),
        containerHeight = (containerWidth / 1.4);

    $('#vmap').css({
        'width': containerWidth,
        'height': containerHeight
    });
}

3) ドキュメントの準備完了関数で sizeMap 関数を呼び出し、サイズ変更時に再度呼び出します。

sizeMap();
$(window).on("resize", sizeMap);

埋め込まれたマップは、縦向きと横向きの両方で iPhone ビューポートに適合するようになりました。さらに、すべてのビューポート サイズに対応するようになりました。

于 2015-06-16T18:21:28.380 に答える