divのwidthをウィンドウサイズによって変える//JavaScript

Flashでは常にStage.widthでウィンドウサイズをとって、コンテンツの配置やサイズ等を可変にすることができますが、CSSはwidthを%換算にすることはできますが、他には無いかと思って考えてみました。

今回はFlashで作ったswfを#flashnaviに読み込むためのエリアですが、規定サイズ(ここでは1000px)以下の場合には1000pxより#flashnaviのwidthが縮まらないようにしました。
ウィンドウの幅は、Javascriptのwindow.innerWidthでとれるはず!と思いましたが、IEなどでは計算方法が異なるため、以下の方法を使いました。
下の例では、ウィンドウサイズが1000px以下の場合のみの記述ですが、elseやelse if等を使って、もっと細かく指定するといろいろと使えそうです。

//CSS//////////////////////////////////////////////////////////////////
#flashnavi{
    width:100%;
}

//HTML//////////////////////////////////////////////////////////////////

<script language="JavaScript">
<!--
inW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

if(inW<1000){document.write("<style>#flashnavi{width:1000px !important;}</style>");}
// -->
</script>
Bookmark and Share


ブックマークに追加