- 締切済み
Android端末実表示ピクセル数の取得方法
Android端末の液晶解像度を取得しJavaScriptを使ったHTMLでの参照方法がわからないのでお教え願えないでしょうか Windows機でのブラウザ表示域をHTML内にJavaScriptを用いて取得するには以下の方法で可能になったのですが、 var wobj = new Object(); wobj.x = document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth; wobj.y = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight; wobj.x = ブラウザの表示横ピクセル数 wobj.y = ブラウザの表示縦ピクセル数 上の関数を使ってAndroid端末から値を得るとViewportの値の１２８０、８００が帰ってきます。 Viewportの値ではなく液晶画面での表示域(ピクセル数)を取得したいのですが可能でしょうか 御存知の方、よろしくお願いします。
- psyna
- お礼率100% (1/1)
- Android
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- okgoripon
- ベストアンサー率44% (1141/2550)
http://d.hatena.ne.jp/onozaty/20060802/p1 試してないですが、この情報は参考にならないですかね？ AndroidはWebkitを採用しているので、表の一番下のSafariと同じのはずです。 ちなみに「JavaScript」＋「ウインドウサイズ」でGoogle検索したら2番目に出てきましたが……。
関連するQ&A
- フレームでのcols設定について
フレームを使用してホームページを作っている者です。 framesetのcolsの設定にて ブラウザの中心から左へ329ピクセル左をフレームの境目に設定したいのですが、 可能でしょうか？ 気持ちとしては <frameset cols="50%-329,*"BORDER="0"> と設定したい感じです。 JavaScriptを使用して ブラウザの幅を取得して半分にして329ピクセル加算する方法で実現しようと考え ------------------------------------------------------------------------------ <html lang="ja"> <HEAD> <title>フレーム設定</title> </HEAD> <script language="javascript" type="text/javascript"> //ブラウザ幅を求めるgetBrowserWidth() //my-notebook（http://osima.jp/blog/js-getBrowserWidth/index.html）さんから拝借 function getBrowserWidth() { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; } else if ( document.body ) { return document.body.clientWidth; } return 0; } </script> <script language="javascript" type="text/javascript"> //フレームの左側の幅を求めるLeftWide() function LeftWide() { var leftwide = (getBrowserWidth())/2-329; return leftwide; } //framesetを出力するFrameSet() function FrameSet() { var output = '<frameset cols="' + LeftWide() + ',*"BORDER="0">'; document.write(output); } </script> <script language="javascript" type="text/javascript"><!-- //FrameSet()の呼び出し FrameSet(); // --></script> <frame src="./左のページ.html" name="left" marginwidth="0"> <frame src="./右のページ.html" name="right"> </frameset> </html> ------------------------------------------------------------------------------ と書いたのですが、 getBrowserWidth() を<BODY>～</BODY>内に書かないとブラウザ幅を取得してくれないらしく、 return 0;が帰ってきてしまい、左のページだけ表示され期待した結果が得られませんでした。 framesetの有るHTMLには<BODY>～</BODY>は定義できないのでここで詰んでしまいました。 ブラウザの中心から左へ329ピクセル左をフレームの境目に設定出来るのであれば どんな方法でも構いません。 お知恵を拝借させてください。よろしくお願いします。 追記 当方ブラウザはIE9を使用しております。 HTML、JavaScript共に初心者ではありませんが、 趣味程度の浅い知識しか御座いません。
- ベストアンサー
- HTML
- JavaScriptで、現在表示中ページの内容の幅を取得するには？
JavaScriptで、現在表示中のページの内容の幅をピクセル単位で取得したいのですが、可能でしょうか？ ウインドウの幅ではなく、表示している内容の幅が欲しいのです。 document.body.clientWidth は、表示領域の幅のようでした。 document.body.scrollWidth も、表示領域の幅のようでした。 document.body.offsetWidth は、ウインドウの幅のようでした。 ブラウザのウインドウ幅に追従する「リキッド」なデザインの場合（教えて!gooもそうです）は、ブラウザのウインドウ幅に合わせて変化しますので、その幅が欲しいです。 Yahooのトップページはテーブルで幅を指定してあるようです。そのような場合はウインドウを最大化したりサイズを変えたりしても“内容”は変化しませんので、その幅を取得したいです。 どのようなプロパティにアクセスすれば良いでしょうか。
- ベストアンサー
- JavaScript
- jqfloat.jsを複数の画像に適用したい
javascriptで7枚の画像をブラウザの中にランダム配置で表示させ、 さらにjQueryのjqfloat.jsで画像をふわふわ動かす、というものを作っています。 ランダム配置まではうまくいったのですが jqfloatが７枚のうち１枚にしか適用されず困っております。（最後のid='fuwa'のところ） jsの勉強を始めたばかりでスクリプトの書き方が変だったりするかもしれませんが… どなたか対処法を教えていただけませんでしょうか。 どうぞよろしくお願い致します！ <script type="text/javascript"><!-- $(document).ready(function() { $('#fuwa').jqFloat({ width: 50, height: 50, speed: 2500 }); }); var images = [ {img : "1.png" , url : "http://1.com"}, {img : "2.png" , url : "http://2.com"}, {img : "3.png" , url : "http://3.com"}, {img : "4.png" , url : "http://4.com"}, {img : "5.png" , url : "http://5.com"}, {img : "6.png" , url : "http://6.com"}, {img : "7.png" , url : "http://7.com"} ]; images.sort(function(){return Math.random() - Math.random();}); function getBrowserWidth ( ) { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; } else if ( document.body ) { return document.body.clientWidth; } return 0; } function getBrowserHeight ( ) { if ( window.inneHeight ) { return window.innerHeight; } else if ( document.documentElement && document.documentElement.clientHeight != 0 ) { return document.documentElement.clientHeight; } else if ( document.body ) { return document.body.clientHeight; } return 0; } Imgn=7; for (i=0; i < Imgn; i++){ xpx = 50+Math.floor(Math.random() * (window.innerWidth -280)) + 1; ypx = 30+Math.floor(Math.random() * (window.innerHeight -300)) + 1; thumbs="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;' id='fuwa'><a href='"+images[i].url+"'><img src='"+images[i].img+"'></a></div>"; document.write(thumbs); } </script>
- 締切済み
- JavaScript
- ページの縦幅を取得する際の問題
ページの縦幅は書き込まれる情報量によって動的に変わります。この縦幅を取得する良い方法がないか探していたところ、Lightboxの関数でまさしく探していたものがありました。 function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight) return arrayPageSize; } この関数を実行すると配列[0]に横幅、配列[1]に縦幅が返ってきます。しかしページ内にCSSでposition: absoluteで位置を指定したオブジェクトがあると、それを認識できないのか求める数値とは違う（小さい）ものが返ってきてしまいます。これはどのようにして対応すればよいのでしょうか？
- 締切済み
- JavaScript
- javascriptで画像サイズをウィンドウのサイズに合わせて表示する方法
javascriptを最近はじめてみました。 しかしどうも慣れないためか、最後の一歩で思うように動いてくれません。 基本的にやりたい事はウインドウサイズに合わせて画像サイズを変更できるようにしたいと思ってます。 何とかいろいろ調べて、下記のスクリプトまで来たんですが （確かこのサイトの他の方への回答からほぼ活用） これでは画面が表示されるときにスクリプトが適用されません。 その後ウィンドウのサイズ変更をすると適用してくれるのですが。 なにやらとても簡単な事で上手く動いてくれないのかもしれませんが、 どうしてもできそうにありません。 どなたかお分かりの方がいましたらご教授願えると大変助かります。 よろしくお願いします。 以下、javascript↓ <body style="overflow:hidden" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <img src="test.JPG" id="backgroundID" style="position:absolute;top:0px;left:0px;z-index:0;" onload="setSize()"> <div style=" color: black; font-size: medium; font-family: serif; visibility: visible; display: block; position: absolute; z-index: 1; top: -1px; left: 0"> <script type="text/javascript"> var imgObj = document.getElementById('backgroundID'); var imgSize = {w:0, h:0} window.onresize = setImg; window.onscroll = function() { var t, l; if (document.documentElement.scrollTop) { t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; } else if (document.body.scrollTop) { t = document.body.scrollTop; l = document.body.scrollLeft; } else { return; } imgObj.style.top = t + 'px'; imgObj.style.left = l + 'px'; } function setSize() { imgSize.w = imgObj.width; imgSize.h = imgObj.height; } function setImg() { var wh, pW, pH, c; wh = getWindowSize(); pW = wh.w / imgSize.w; pH = wh.h / imgSize.h; if (pW > 0 || pH > 0) { c = (pW > pH) ? pW : pH; imgObj.style.width = parseInt(imgSize.w * c + 1) + 'px'; imgObj.style.height = parseInt(imgSize.h * c + 1) + 'px'; } else { imgObj.style.width = imgSize.w + 'px'; imgObj.style.height = imgSize.h + 'px'; } } function getWindowSize() { var wh = {w:0, h:0}; if (document.body.clientWidth) { wh.w = document.body.clientWidth wh.h = document.body.clientHeight; } else if(document.documentElement.clientWidth) { wh.w = document.documentElement.clientWidth; wh.h = document.documentElement.clientHeight; } else if(window.innerWidth) { wh.w = window.innerWidth; wh.h = window.innerHeight; } return wh; } </script> </body>
- 締切済み
- JavaScript
- ウィンドウサイズの変更を滑らかに取得したい
<html> <head> <script type="text/javascript"> function test(){ width = document.body.clientWidth; height = document.body.clientHeight; document.getElementById("haba").value=width; document.getElementById("takasa").value=height; } </script> </head> <body onload="window.setInterval('test()',1);"> 幅<input size="20" type="text" id="haba"/> 高さ<input size="20" type="text" id="takasa"/> </body> </html> -------------------------------------------------------------- 以上のような、ブラウザのウィンドウサイズを取得する コードを書いたのですが、滑らかに高さと幅が取得出来ずに困ってます。 イメージとしては、ウィンドウサイズをマウスで変更すると 高さと幅の数値がもっと滑らかに細かく変化するように したいのです。 どなたか回答お願いします。
- ベストアンサー
- JavaScript
- マウスでページを横スクロールさせる方法
縦方向にスクロールさせることはできましたが横スクロールの方法がどうしてもわかりません。 縦スクロールのやり方も下のスクリプトより簡素化できますでしょうか？ <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function mScroll(){ scrollTo (0,(document.body.scrollHeight-document.body.clientHeight)*event.y/document.body.clientHeight); } </SCRIPT> </HEAD> <BODY onmousemove="mScroll()"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- Ajax的な手法で取得したHTMLの表示
いつもお世話になっております。 XMLHttpRequestで非同期に取得したHTMLをポップアップのように表示させたいのですが、方法がよくわかりません。 <div id="popup"> THIS IS AJAX TEST!! </div> というテキストが取得できるとしたらこのテキストはHTMLとしては認識されていないのでしょうか？ pop = document.getElementById('popup'); document.body.appendChild(pop); とやれば表示されるかと思いましたがうまく行きません。 下手な質問になってしまいました。。とにかく、非同期で取得したHTML をJavascriptから操作する方法を教えていただけると嬉しいです。
- ベストアンサー
- JavaScript
- ブラウザのサイズ取得がXHTMLにするとうまくいか
http://www.tagindex.com/javascript/user/area.html に ブラウザのサイズ取得のサンプルが載ってます。 <html> <head> <title>TAG index Webサイト</title> </head> <body> <script type="text/javascript"> <!-- if(document.all){ // IE用 document.write('<p>横のサイズ：<strong>' + document.body.clientWidth + '</strong><br>'); document.write('縦のサイズ：<strong>' + document.body.clientHeight + '</strong></p>'); } else{ document.write('<p>横のサイズ：<strong>' + innerWidth + '</strong><br>'); document.write('縦のサイズ：<strong>' + innerHeight + '</strong></p>'); } // --> </script> </body> </html> です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> にすると、IE8で高さが小さな値しかでません。 しかし、紹介したページはただの<html>でないのに、 正しい値が出力されています。 何が足りないのでしょうか。 <p>・・・</p> を２スクロール分入れたら、今度が大きすぎる値が出力されてしまいました。 困っております。どうか助けてください。お願いします。
- ベストアンサー
- JavaScript
- XHTML（厳格）でJavaScriptが動かない
ソースを書くと見ずらいので、 ＵＲＬで提示しますと http://martin.p2b.jp/index.php?UID=1115484023 の部分ですが、 d.body.appendChild(imgPop); （d=document と宣言されているとする） で、エラーもなく、どのブラウザーでも何も動いてくれません。 ちなみに、XHTMLで奨励されている Content-type: application/xhtml+xml で出力するようにしています。 (metaでは一切宣言してません） これを普通に、text/html に出力させるだけで 動作するのはするのですが・・・ どなたか、mime type を変更せずに 解決できる方はいらっしゃいますでしょうか？ よろしくお願いします。 p.s. d.body.innerHTML="hoge"; はできるようです。 ------------ 見ずらいですが、ソースはこちら var d=document; function getClientWidth(){ if(self.innerWidth){ return self.innerWidth; } else if(d.documentElement && d.documentElement.clientWidth){ return d.documentElement.clientWidth; } else if(d.body){ return d.body.clientWidth; } } function getClientHeight(){ if(self.innerHeight){ return self.innerHeight; } else if(d.documentElement && d.documentElement.clientHeight){ return d.documentElement.clientHeight; } else if(d.body){ return d.body.clientHeight; } } function getScrollY(){ if(typeof window.pageYOffset != "undefined"){ return window.pageYOffset; } else if(d.body && typeof d.body.scrollTop != "undefined"){ if(d.compatMode == 'CSS1Compat'){ return d.documentElement.scrollTop;; } return d.body.scrollTop; } else if(d.documentElement && typeof d.documentElement.scrollTop != "undefined"){ return d.documentElement.scrollTop; } return 0; } var imgPop = null; imagePop = function (e, path, w, h){ if(imgPop==null){ imgPop = d.createElement("IMG"); imgPop.src = path; with (imgPop.style){ position = "absolute"; left = Math.round((getClientWidth()-w) / 2) + "px"; top = Math.round((getClientHeight()-h) / 2 + getScrollY()) + "px"; margin = "0"; zIndex = 1000; border = "4px groove Teal"; display = "none"; } d.body.appendChild(imgPop); if(imgPop.complete){ imgPop.style.display = "block"; } else window.status = "画像読み込み中…"; imgPop.onload = function(){imgPop.style.display="block"; window.status="";} imgPop.onclick = function(){d.body.removeChild(imgPop);imgPop=null;} imgPop.title = "マウスクリックで閉じます"; } }
- ベストアンサー
- JavaScript
お礼
御返答ありがとうございます。 URLのページを参考にしましたが問題解決には至りませんでした。ですが、掲載されていた内容はとても興味深くまた、私の知らない情報もありましたので大変参考になりました。 ちょっと調べてみたのですがAndroidのバージョンによってこれらのプロパティから取得できる数値が違うことがわかりました。 Android1.6では御提供いただいたプロパティで正解でした。 ですが Android2.0ではViewport言われる内部仮想スクリーンの固定数値しか返さないことがわかりました。 それ以降のバージョンでは実機を持っていないので確認できませんでしたが・・・ 何れにせよ御提供いただいた情報は大変参考になりました。 ありがとうございます。