HTML5から導入された便利な属性の一つに「placeholder」があります。フォームの入力枠に薄く文字を表示させ、ユーザビリティ向上のために使用しますね。
例）
placeholderを指定する時は下記のように記述します。
<div class="placeholder"> <input type="text" placeholder="テキストを入力して下さい"> </div>
しかしこのplaceholde、ある条件が重なると、iPhone(iOS)で表示が崩れる時があります。
表示が崩れる条件
下記のようなCSSの書き方をしていると、iPhoneで「縦向き表示→横向き表示→縦向き表示」と画面を回転させると、最後に縦向きにした際に画面右側に大きな余白が発生してしまいます。
.placeholder input[type="text"]{
width: 100%;
}
スマートフォン向けサイトを構築する際、横向きにも対応するためwidthをパーセント指定する事が多いかと思います。但し、placeholderを指定しているinputにwidth:100%を指定すると、上記の通り表示崩れが発生します。
解決法
この崩れが発生した場合、placeholderを指定したinputの親要素に下記の通りCSSを記述すれば正常に表示されるようになります。
.placeholder{
overflow: hidden;
}
placeholderを使用して表示崩れが発生してしまった場合に、ぜひお試し下さい。
