CSS基礎(K)Androidブラウザの旧バージョンでheightに%指定すると画像がのびる場合があるHOMEHTML/CSS(K)Androidブラウザの旧バージョンでheightに%指定すると画像がのびる場合があるスマホ案件の構築中に、クライアントさんから画像が伸びているという指摘を受けました。AndroidにはデフォルトのブラウザがChromeではなく「ブラウザ」ってアプリが存在します。わからん挙動を起こします。auto;}おそらく大本の高さの取得の解釈の違いっぽいんですが、「auto」に変えることによって解消はされました。Androidアプリの「ブラウザ」はメーカごとにバージョンが違うようで、今回の現象が起こったのも「3.☓☓☓☓☓☓」とか円周率か?と思わせる数字だったので、厳密にこのバージョンで起こる現象と断定できませんが、スマホでBoxや画像の指定で「height:100%;」は避けたほうがいいかと思います。(そもそもこの場合でこういう指定は必要ありませんよね)heightの100%の使いドコロについておさらいそれじゃ、どんな時にheightに「%」指定するのか復習の意味をこめておさらい。red;}こんな感じで、「box02」を囲う「box01」に高さが指定されてる場合は500pxの50%って事で「250px」で表示されるって事。red;}全囲いの「html」と「body」に100%指定しちゃえば、それを基準に中身の「box01」と「box02」は高さを引き継ぐって事で。使いドコロはないかもしれませんが、知ってて損はないかなと・・・。DEMOまとめAndroidのブラウザでの動作確認は実機が無限にあるため、ボーダーラインが見極めにくいです。一応会社には、古めのAndroidと最新のAndroidはあるんですが、自分の持ってるスマホがiPhoneのため、見落としがちです。救いようのないバグが起きないように祈りますが、検証は大事なことなんだと思い知らされました。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。