iPhoneのSafari対応について - プログラミングノート
Safari対応サイトを作った際にあまり調べていなかったので、ちょっと調べてみました。OS 3.0から使える機能も増えていて、簡単なアプリならネイティブアプリ作らなくても実現できますね。選択肢が増えるのは良いことです。 ブラウザの仕様 Web標準技術が使えるので、PCサイト開発の延長で作れる。 ブラウザ互換などは気にしなくて良いので、HTML5+CSS3で作りこむのもあり。 制限 リソースの制限 デコード後のGIF, PNG, TIFF 2MBまで デコード後のJPEG 32MB アニメーションGIF 2MBまで Canvas 要素 2MB その他リソースファイルはそれぞれ10MBまで その他制限 cookieサポート Flash, Javaアプレット, SVG(サポートされているようです), XSLTは非サポート サードパーティー製のプラグインは非サポート JavaScript実行時間
デバイスに合わせてCSSを振り分ける「Media Queries」 | DevelopersIO
Media Queriesは、読み込まれるCSSや、CSSの記述のインラインに条件を加えること出来るようになる仕様です。 今までもCSS2のMedia typesを使い、screenやprintなど大まかなメディア用スタイルを設定することはできました。ですが、それでけでは昨今のスマートフォン、タブレット端末事情にはとても対応できません。JavaScriptで対応する方法もありますがシンプルではありません。そこで、CSS3だけで振り分けが可能になるのがMedia Queriesという仕様です。 Media Queries Media Queriesはユーザーの端末、スクリーンサイズをもとに適したスタイルシートを適用することができます。Media Queriesを利用することで、PC用スタイルシート、タブレット用スタイルシート、スマートフォン用スタイルシートと個別にスタイルを指定することができ
iPhone / iPad サイズ別 apple-touch-icon.png 作成
アイコン（PNG）を指定するには、linkタグで指定する方法と、特定のファイル名で保存する方法の2種類があります。 アイコン画像をlinkタグで指定する 全てのデバイス共通のアイコンを指定するには、次のコードをHTMLのheadタグ内に記入します。 <link rel="apple-touch-icon" href="apple-touch-icon.png" /> さらに、デバイス別にアイコンを変更するには、「sizes」属性でサイズを指定します。iPhone 4（Retinaディスプレイ）の記入例は次のとおりです。 <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" /> このようにして3種類のサイズのアイコンを指定すると、次のようなコードになります。 <link rel="a
iPhone と Android の apple-touch-icon の違い
「apple-touch-icon」を指定した場合は、iPhoneとAndroidどちらも同じアイコンになりますが、「apple-touch-icon-precomposed」を指定した場合は、それぞれ異なるアイコンになります。 iPhoneは、「apple-touch-icon」「apple-touch-icon-precomposed」ともに、最初に指定したアイコンが有効になるようです。一方Androidは、「apple-touch-icon」の場合は最初に指定したアイコン、「apple-touch-icon-precomposed」の場合は最後に指定したアイコンが有効になるようです。 この違いを利用して、次のような順序で記入すると、iPhoneとAndroidに異なるアイコンを指定できます。 <link rel="apple-touch-icon-precomposed" href=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ivankov.iscw.jp/ivankov/html5paging/demo.html
navigator.onLine - オンライン/オフライン状態を得る - JavaScriptリファレンス
