Distribution dashboard | Platform | Android DevelopersModern Android Quickly bring your app to life with less code, using a modern declarative approach to UI, and the simplicity of Kotlin.
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=
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
Androidと-webkit-tap-highlight-color
Androidと-webkit-tap-highlight-color Androidと-webkit-tap-highlight-colorの関係がよくわからず色々と悩んでいたのですが、ひと通りの結論が出たので紹介します。 そもそも-webkit-tap-highlight-colorってなによ iPhoneなどのスマートフォンでa要素をタップしたときにハイライトさせるプロパティです。ハイライトと言ってもiPhoneの場合は半透明のグレーのレイヤーが表示されるのですが。 サンプル このレイヤーの色を-webkit-tap-highlight-colorで制御することが可能です。 a { -webkit-tap-highlight-color: rgba(0,0,215,0.40); } このようにするとハイライトカラーが半透明な青色に変わります。 サンプル ただし、このように指定してもA
Androidのposition:absoluteとフォームの問題
Androidのposition:absoluteとフォームの問題 Androidではposition:absoluteをした要素内にフォーム部品があると色々と不具合があるようです。 例えば、次のようにフォーム部品の背景になにか文字列があるような状態にしてしまうとAndroid2.2でフォームが選択できなくなります。Android2.1ではちゃんと選択できた。 <style> body{ margin:0; } #search{ width:100%; height:100px; background:blue; position:absolute; } #back{ width:100%; height:100px; } </style> <div id="search"> <br> <select> <option>選択1</option> <option>選択2</option> <
AndroidとjQueryのスライドアニメーションの不具合
AndroidとjQueryのスライドアニメーションの不具合 Android2.2でjQueryのスライドアニメーションを利用すると、特定の条件でセレクトボックスの値が切り替わらないという不具合が発生します。 まずは問題なく動作するパターン。 $(".btn").click(function(){ if($("#search").css("display")=="block"){ $("#search").slideUp(); }else{ $("#search").slideDown(); } return false; }); サンプル 開閉リンクでセレクトボックスの表示・非表示を切り替えられます。 次が不具合があるパターン。 $(".btn").click(function(){ if($("#search").css("display")=="block"){ $("#search
Androidでfont-weight:boldを適用する方法
Androidでfont-weight:boldを適用する方法 Androidでは日本語にfont-weight:boldが適用されません。 <p style="font-weight:normal">ノーマル normal</p> <p style="font-weight:bold">ボールド bold</p> このHTMLをAndroidで確認すると次のようになります。 日本語だけ太字になっていないですね、デフォルトのフォントにbold体がないらしいんですが、デバイス毎にフォントも変わるのでfont-familyでは回避できず。 対策としてはfont-weightの代わりにtext-shadowを利用して太字にします。 <p style="text-shadow:1px 0 0 black">ボールド bold</p> ただ、この方法だとiPhoneでは太字になるけどAndroidで
Androidで-webkit-box-reflectによる鏡面効果を指定する方法
Androidで-webkit-box-reflectによる鏡面効果を指定する方法 Androidで-webkit-box-reflectのマスク処理が使えない！とつぶやいたら@mattari_pandaからurl()による指定は聞くよと教えていただきました。 そもそも-webkit-box-reflectってなによ! 画像などの反射を制御することができるCSSプロパティです。WebKit独自のプロパティなのでSafariやChrome以外のブラウザでは利用できません。 -webkit-box-reflect:<direction> <length> <image>; といった感じで指定が可能です。 directionには上(above)、下(below)、左(left)、右(right)が指定できます。 lengthには反射画像の距離を指定できます。 imageにはマスク画像が指定できま
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
Androidにおけるコンテンツフィットと「overflow:hidden」
Androidにおけるコンテンツフィットと「overflow:hidden」 ネタ元：スマホサイトの作り方で、あんまり書かれてないことを書いてみた - iPhone・Android・WEB・音楽制作｜Kaleidoscope ネタ元ではスマートフォン向けに「overflow:hidden」を指定して横スクロールが表示されないようにするテクニックが紹介されています。しかし、「Androidの場合は完全じゃありません。」の一言が！これはおそらくAndroidのコンテンツフィット機能に関する問題だと思うのでそこらえへんを詳しく解説してみたいと思います。 次のようなHTMLをAndroidとiPhoneで表示したとします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横スクロール</title> <style> #cona
Androidの「target-densitydpi」でviewportの調整
Androidの「target-densitydpi」でviewportの調整 どうも色々調べているとAndroidのviewport調整はtarget-densitydpiというプロパティで行うのがよさそうです。 「target-densitydpi」はAndroid2.0以上で利用でき、表示時のdpi(dots per inch/1インチの中に何ドット表示するか)を指定できます。 <meta name="viewport" content="width=device-width;target-densitydpi=device-dpi"> device-dpiを指定すると画面解像度とディスプレイ表示が同じサイズになります。これでかなり直感的でわかりやすくなると思いますが、画像が多いデザインだととファイルサイズが気になるところです。 キーワード指定では「low-dpi(120dpi)」、
Androidの画面サイズとDPI
Androidの画面サイズとDPI 前回、Androidではtarget-densitydpiでviewport調整を行えばよいと書きましたが、実際にどのようなサイズになるか具体的な説明をしたいと思います。 ディスプレイにおけるインチサイズ ドコモのGALAXY Sではディスプレイサイズが約4.0インチと発表されています。1インチが2.54cmなので約4.0インチは約10.16cmです。ディスプレイにおけるインチサイズは画面の対角線の長さなので次のような画面サイズになります。 ディスプレイ種類 GALAXY Sのディスプレイ種類はワイドVGAです。これはディスプレイの縦横比を表しています。wikipediaによるとワイドVGAの縦横比は15:9です。 ディスプレイサイズ 縦横比からピタゴラスの定理より実際の縦と横のインチサイズが算出できます。 対角線の比率をXとすると次の方程式が成り立ちま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンブラウザ不具合特集
デザイン | Android Developers