人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JavaScriptの質問です。
Webページの横幅を自動的に取得したいです。
横幅というのはウインドウでもなくディスプレイでもなく、そのサイトが横幅何ピクセルで作っているか、ということです。
(もちろんリキッドレイアウトや全フラッシュの場合は取得できませんが。)

たとえば「XRAY」というサービス(http://westciv.com/xray/index.html)は、ブラウザで表示しているページの各HTML要素を細かく解析できますが、JavaScriptで動作しているようです。
こういった形でサイトの横幅だけが取得できればと思います。
JavaScriptだけでは難しい場合はPHPとの組み合わせでもいいので、どのように実現できるか教えていただければと思います。


●質問者: indiana
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML JavaScript PHP Web いるか
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● y-kawaz
●35ポイント

サンプルコードです。

<html>
<script type="text/javascript">
function showSize() {
 var body = document[document.compatMode=='CSS1Compat'?'documentElement':'body'];
 alert(
 "clientWH="+body.clientWidth+'x'+body.clientHeight+"\r\n"+
 "scrollWH="+(navigator.userAgent.match(/WebKit/)
 ? window.innerWidth+'x'+window.innerHeight
 : Math.max(body.scrollWidth,body.clientWidth)+'x'+Math.max(body.scrollHeight,body.clientHeight)
 )
 );
}
</script>
<style>
body {
 margin:0px;
 padding:0px;
}
</style>
<body>
<div style="width:500px;height:500px;background-color:pink;">
<input type="button" value="showSize" onclick="showSize()">
</div>
</body>
</html>

clientWHはブラウザ内のサイズで、scrollWHはスクロールバーが出て見えない部分も含むサイズです。

ブラウザのサイズを変えながら試すとそれぞれがどんな値か分かると思います。

bodyのmargin等を設定しているのは変な隙間を除く為です。試しにこのスタイルシートを外した時との値の違いを見ると効果が分かると思います。

scrollWHの取得は、ブラウザによって使えるプロパティがまちまちですが上記はそれを吸収できています。ちなみにWebKitはSafariやiPodTouchで使われているレンダリングエンジンです。

◎質問者からの返答

回答ありがとうございます。

質問が伝わりにくかったかもしれませんが、「ウインドウでもなくディスプレイでもなく」と書いたのは、

ウインドウ(ブラウザ)サイズではなく、そのサイト(ページ)のコンテンツの横幅が取得したいからです。

ご回答いただいたものはウインドウ(ブラウザ)サイズの取得ですよね?


2 ● nagase
●35ポイント

Mozilla Firefox というブラウザの拡張機能に Web Developer という物があります。

本家

http://chrispederick.com/work/web-developer/

日本語版

http://lab.tubonotubo.jp/tools/webdeveloper/index.html

その中に、[情報>ブロック要素のサイズを表示する] という機能があります。

それで一番外側のブロック要素のサイズを調べればよいかと思います。

ただしブロックの入れ子が複雑だと、サイズ表示が重なって見えないことも有ります。

そういう場合は、[CSS>スタイル情報を表示する] という機能を使って、

該当するブロック要素のスタイルシートを見ることができます。

◎質問者からの返答

回答ありがとうございます。

すみません。「JavaScriptの質問です」と質問させていただいたので、そういったツールの使用は考えていません。

質問に書くべきでしたね・・・。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ