iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
【Chrome】参照型変数を console.log/dir した時の挙動が怪しい｜もっこりJavaScript｜ANALOGIC（アナロジック）
私はWEB制作ではChromeをメインブラウザとして使っています。JavaScriptをテストする時もChromeのデベロッパーツールを重宝しているのですが、なんとなく、オブジェクトや配列のような参照型変数を console.log や console.dir で出力した時の挙動が怪しい（クセがありそうな）気がしたので少し調べてみました。 どの辺が怪しいかを簡潔に説明するために、単純化したコードを次に示します。 'use strict'; var obj = {message: ''}; var fn1 = function () { obj.message = 'fn1 called!'; console.dir(obj); // (A) }; var fn2 = function () { obj.message = 'fn2 called!'; console.dir(obj); /
JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
HTML の script タグ内にインラインで書かれた js をデバッグする方法 - Qiita
はじめに HTML の script タグ内にインラインで書かれた js をデバッグする方法を共有します 本来であれば外部ファイルとして *.js にすべきですが、ワケあって <script> タグ内に js が書かれている場合に有効です！ この方法は script タグに囲まれた js を、 あたかも外部ファイルの js として扱えるようになります やってみよう 例えば、以下のような html があるとします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Qiita</title> </head> <body> <div id="hello">Hello World!</div> <script> document.querySelector('#hello').addEventListene
Chrome 43からDOMの属性がJSのプロトタイプチェーンに移行します - Qiita
Chrome 43およびそれ以降のバージョンにおいて、DOMの属性（値）がJavaScriptのプロトタイプチェーンに移行されます。これにより、突っ込んだことをやっていた場合に、今まで動作していたコードが動かないということが発生する可能性がありますので、事前に変更内容を知り、対策をしておくことが求められます。HTML5Rockの更新情報として掲載されていましたので、さっそく日本語訳をしてみました。心当たりがある方は、ぜひ以下の内容を読んでいただいて、コードの修正などに取り込んでいただければと思います。 原文: http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype DOM属性は今後プロトタイプチェーンに Chromeチームは、最近「DOM属性をプロトタイプチェーンに移動しています」とアナウンスしてい
localStorageの挙動と簡単なラッパー - Block Rockin’ Codes
[追記] テストのソースだけを見られる様に、gistに張りました。 gist:542451 localStorageを使ってちょっとやってみたいことが有るので、まずはlocalStorageを色々使って見ようと思ったのですが、思った以上にブラウザごとの挙動に差があって、イベントどころかだだ値を取り出すだけでも、色々気をつける必要があることが分かりました。 以下は、手元の Mac に有った FireFox 3.6.8 Chrome 5.0.375.126 Sagari 5.0 (6533.16) の環境で試した結果です。 格納出来るデータ W3Cの仕様ではJSのオブジェクトであれば一通り格納出来るように定めているらしいですが、現在は単なる文字列しか入らない物が多いようです。 なので、オブジェクトを格納するためには、JSONをシリアライズして入れる形になると思います。 Native JSON
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
