タグ

画面サイズに関するpokotanuのブックマーク (2)

  • 画面サイズに合わせて高さを指定する3つの方法

    縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には1番なじみがあります。 $(document).ready(function () { hsize = $(window).he

    画面サイズに合わせて高さを指定する3つの方法
  • 画面サイズを取得する

    赤字:JavaScriptの命令や重要なタグ/青字:用途に応じて変更する部分/緑字:変更可能な変数名やユーザー関数名 戻る 実例 画面サイズ: ウィンドウサイズ: 例文 <p>画面サイズ:<span id="ScrSize"></span></p> <p>ウィンドウサイズ:<span id="WinSize"></span></p> <script type="text/javascript"> //画面サイズの取得 getScreenSize(); //ウィンドウサイズの取得 getWindowSize(); //画面サイズを取得する function getScreenSize() { var s = "横幅 = " + window.parent.screen.width + " / 高さ = " + window.parent.screen.height; document.get

    pokotanu
    pokotanu 2016/05/09
    function getViewportH() {var client = window.document.documentElement['clientHeight'],inner = window['innerHeight'];( client < inner )? return inner: return client;}
  • 1