[B! Android] webmugiのブックマーク

Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ

Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ表題のとおりですが、少しわかりにくいので詳しく説明します。このバグはAndroid4.0とAndroid4.1のブラウザで発生を確認しました。ChromeやiPhoneのMobile Safariでは発生しません。ページ内にposition: fixedした要素(A要素)が存在し、別の要素(B要素)にoverflow: hiddenを指定しています。B要素にはwidth:100%やwidth:autoでウィンドウ幅いっぱいになるように設定しています。そしてB要素の内側にはブラウザ幅を越える要素を配置します。 HTML/CSSはこんな感じ。 <div id="a"></div> <div id="b"><div></div></div> #a{ width:100%; heigh

webmugi 2013/06/22

css
android

リンク

iPhone等での表示をPCで確認出来るAir製のシミュレーター・Mobilizerがローカルファイルにも対応出来るし、割と良かった

iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。シミュレーター（エミュレーター？よくわからｎ）はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな？ｗ動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能日本なら、基本的にiPhoneとAndroidだけあれば

webmugi 2011/06/30

リンク

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)」、

webmugi 2011/05/30

Android

リンク

MacのAndroid エミュレータでサイト制作

MacのAndroid エミュレータでサイト制作 Mac OS X へのAndroid エミュレータのインストール方法です。Windowsはこちらを参照(Android エミュレータでサイト制作)。 Android エミュレータのダウンロードサイトよりMac OS X (intel)の「android-sdk_r10-mac_x86.zip」をダウンロード。ダウンロードしたファイルを解凍してアプリケーションフォルダに移動、「/tools/android」をクリックしてAndroid SDK and AVD Managerを開きます。左メニューの「Available packages」を選択し、「Android Repository」をクリック。ダウンロードできるAPIが表示されます。必要なAPIを選択して「Install Selected」ボタンを押します。 Choose Packe