jQueryでスマートフォンとタブレットでviewportを切り替える実験（iPhone6 Plus対応）｜BLACKFLAG
Webサイトを作る際、最近では様々な画面サイズ（解像度）のデバイスが増えていることから レスポンシブで構築する際のviewport設定に迷うことがあります。 すべてのデバイスで画面幅に合わせて綺麗に表示させるには viewportの値を切り替えてしまった方が楽な場合もあったので スマートフォン［iPhone/Android］とタブレット［iPad/Android］それぞれで jQueryを使って、viewportを切り替えるサンプルを作ってみたので紹介してみます。 まずは別枠で動作サンプルから。 ※サンプル画面はスマートフォンまたはタブレットでご確認ください。 「jQueryでスマートフォンとタブレットでviewportを切り替える実験」サンプルを別枠で表示 見た目上は分かりませんが スマートフォン［iPhone/Android mobile］とタブレット［iPad/Android］で そ
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 | WebNAUT by Beeworks
一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
Android 4.0 (ICS) の device-width メディアクエリ
サンプル たとえば「@media (max-device-width:480px)」（デバイス幅480px以下の場合に適用）というようなメディアクエリを使って、スマートフォン向けのスタイルシートを指定している場合、Galaxy Nexusで縦向き表示すると「device-width」が「720px」になるので、スマートフォン向けのスタイルシートは適用されません。そもそも、この指定では、Xperia rayを横向きにした場合でも適用されません。 ここで、Galaxy Nexusにもスマートフォン向けスタイルシートを適用させるために「max-device-width:1280px」としてしまうと、多くのPCのブラウザでもスマートフォン向け表示になってしまいます。 というわけで、Android 4.0では、「device-width」でスマートフォンを識別するのは難しくなります。「device-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
