サイト制作に関するメモ書き

HOME > スマートフォン > スマホでinputにwidth: 100%;とplaceholderを指定した時に、端末を横向きから縦向きに変更すると画面幅がおかしくなる

スマホでinputにwidth: 100%;とplaceholderを指定した時に、端末を横向きから縦向きに変更すると画面幅がおかしくなる

iOSの端末を横向きから縦向きに変更した時に、画面幅が横向きの時の幅から戻らなくなる不具合に遭遇したのでメモ。
確認したのはiOS6の端末です。

サンプルコード

inputにwidth: 100%;とplaceholderが指定されている場合に発生するようです。

HTML

<form action="">
	<div class="form__key">お名前</div>
	<div class="form__value">
		<input type="text" name="name" placeholder="山田 太郎" class="form__value-text" />
	</div>
</form>

CSS

.form__value-text {
	width: 100%;
	box-sizing: border-box;
}

対応前のデモページ
 

overflow: hidden;を指定することで対応できます。

CSS

.form__value {
	overflow: hidden;
}
.form__value-text {
	width: 100%;
	box-sizing: border-box;
}

対応後のデモページ
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP