1. ホーム
  2. 質問と答え
  3. メタビューポートとAndroidに関する問題

メタビューポートとAndroidに関する問題

2011-07-06 11 views
7

私は、JQueryに基づいてジェネリックなjavascriptダイアログクラスを作り、画面中央にdivポップアップを作成しようとしています。すべての一般的なブラウザでこれを達成するのは簡単なバニラでした。メタビューポートとAndroidに関する問題

モバイルプラットフォームの場合、ビューポートの問題が発生します。表示されているビューポート（表示されている現在の「表示ウィンドウ」です）、レイアウトビューポート（下にあるページのサイズ、つまりCSSビューポート）の違いです。 iPhone用

、私はスケーリングのためのセンタリング調整するDOMプロパティwindow.innerWidthとwindow.innerHeightを使用することができた、とpageXOffset/pageYOffsetで、パンを調整するために：

// Get dialog width/height 
var dx = $("#dialog").width(); 
var dy = $("#dialog").height(); 

// Get window (layout viewport) width/height 
var winW = $(window).width(); 
var winH = $(window).height(); 

if (window.innerWidth!=winW) { 
    // Zoomed in or users browser window width is smaller than layout width 
    var x = window.pageXOffset+(window.innerWidth-dx)/2; 
} else { 
    // Not zoomed in 
    var x = window.pageXOffset+(winW-dx)/2; 
} 

if (window.innerHeight!=winH) { 
    // Zoomed in or users browser window height is smaller than layout height 
    var y = window.pageYOffset+(window.innerHeight-dy)/2; 
} else { 
    // Not zoomed in 
    var y = window.pageYOffset+(winH-dy)/2; 
}

私はその後、私のダイアログの左/上をそれぞれxとyに設定して配置します。これはほとんどのブラウザやiPhoneでもうまくいきますが、Androidプラットフォームでは動作しません。

Googleを使用して過度の調査を行った後、Androidはwindow.innerWidthプロパティとwindow.innerHeightプロパティで多少の問題を抱えていると思われます（例：http://www.quirksmode.org/mobile/viewports2.html、「表示可能なビューポートの測定」を検索）。

オプションは、Androidブラウザを識別し、window.pageXOffset/window.pageYOffsetで常にダイアログを配置することで、表示されるビューポートの上/左に配置されます。しかし、これは多くの理由で悪い選択です。特に、ズームアウトすると悪く見えることがあります。

Androidで表示可能なビューポートを計算する方法を知っている人はいますか？それとも誰かにこれの回避策が見つかりましたか？

出典

2011-07-06 Patrick Fabrizius

+0

ダイアログがマウスイベントなどのユーザーイベントに対する応答です...この質問に答えましたか？ – Prusse

+0

はい、それは一般的な考えです。 –

+0

何らかのオブジェクト検出と共にevent.pageX/Yとevent.clientX/Yを処理してみることもできます。 – Prusse

答えて

0

答えは、デバイスの幅にビューポートの幅を設定する必要があるようです。私がテストしたすべてのAndroidバージョン（2.1,2.2、および2.3）で動作するようです。

<meta name="viewport" content="width=device-width">

出典

2011-07-13 18:57:28

+0

この修正は私にとっては機能しません。 –

+0

@ShaunLuttinどのデバイス/バージョンですか？ –

3

をここに関連したビューポート/幅問題に関する私の研究の公平なビットを掲載しましたこれは良い答えです...だから、たくさんのAndroidデバイスで作業した後、私はAndroidの問題に大きな解決策（ハック）があると思っています。これを試してみてください：

<!--HTML VERSION --> 
<div id="sojernTest" style="position:absolute; top:0;bottom:0;left:0;right:0;display:none;"></div>

OR 

// JAVASCRIPT WITH CSS CLASS 
var div = document.createElement('div'); 
div.id = "screenSizeHolder"; 
div.className = "screen_size_holder"; 
document.body.insertBefore(div, document.body.firstChild); 

$('#screenSizeHolder').html("&nbsp;");

はその後、クロスプラットフォームで動作するはずです、私はslighly異なるアプローチが出ている 

screenHeight = parseInt($('#screenSizeHolder').css('height').replace('px','')); 
screenWidth = parseInt($('#screenSizeHolder').css('width').replace('px',''));

出典

2012-07-11 19:44:01

関連する問題

 関連する問題