スマホでスライダーを配置したときに、スライダー内の文字サイズが大きくなる

スマートフォンサイトでスライダーを配置したときに、iPhoneなどで見るとスライダー内のテキストが大きく表示される現象に遭遇したので対応方法をメモ。

サンプルコード

jQueryプラグインのslick.jsを使って実装してみます。

HTML

<div class="slide-list">
	<div class="slide-list_item">
		<div class="slide-list_img">
			<img src="http://placehold.it/320x240/ff0000/ffffff">
		</div>
		<p class="slide-list_description">赤（あか、紅、朱、丹）は色のひとつで、熟したイチゴや血液のような色の総称。JIS規格では基本色名の一つ。</p>
	</div>
	<div class="slide-list_item">
		<div class="slide-list_img">
			<img src="http://placehold.it/320x240/0000ff/ffffff">
		</div>
		<p class="slide-list_description">青（あお、靑、蒼、碧）は基本色名のひとつで、晴れた日の海や瑠璃のような色の総称である。青は英語のblue、外来語のブルーに相当する。</p>
	</div>
	<div class="slide-list_item">
		<div class="slide-list_img">
			<img src="http://placehold.it/320x240/00ff00/ffffff">
		</div>
		<p class="slide-list_description">緑（みどり、綠）は、寒色の一つ。植物の葉のような色で、黄色と青の中間色。光の三原色の一つは緑であり、1931年、国際照明委員会は546.1nmの波長を緑 (G) と規定した。</p>
	</div>
	<div class="slide-list_item">
		<div class="slide-list_img">
			<img src="http://placehold.it/320x240/ffff00/ffffff">
		</div>
		<p class="slide-list_description">黄色（黃色、きいろ、オウショク）は、基本色名の一つであり、色の三原色の一つである。</p>
	</div>
</div>

CSS

.slide-list {
	max-width: 300px;
	overflow: hidden;
	margin: 0 auto;
}
.slide-list_item {
	float: left;
}
.slide-list_img img {
	width: 100%;
	height: auto;
}
.slide-list_description {
	font-size: 12px;
}

JavaScript

$(function() {
	$('.slide-list').slick({
		autoplay: true,
		slidesToShow: 1
	});
});

slick.jsを使って実装した場合のデモページ
　

bxslider.jsを使ってみます。

HTML

<div class="slide-list_wrapper">
	<div class="slide-list">
		<div class="slide-list_item">
			<div class="slide-list_img">
				<img src="http://placehold.it/320x240/ff0000/ffffff">
			</div>
			<p class="slide-list_description">赤（あか、紅、朱、丹）は色のひとつで、熟したイチゴや血液のような色の総称。JIS規格では基本色名の一つ。</p>
		</div>
		<div class="slide-list_item">
			<div class="slide-list_img">
				<img src="http://placehold.it/320x240/0000ff/ffffff">
			</div>
			<p class="slide-list_description">青（あお、靑、蒼、碧）は基本色名のひとつで、晴れた日の海や瑠璃のような色の総称である。青は英語のblue、外来語のブルーに相当する。</p>
		</div>
		<div class="slide-list_item">
			<div class="slide-list_img">
				<img src="http://placehold.it/320x240/00ff00/ffffff">
			</div>
			<p class="slide-list_description">緑（みどり、綠）は、寒色の一つ。植物の葉のような色で、黄色と青の中間色。光の三原色の一つは緑であり、1931年、国際照明委員会は546.1nmの波長を緑 (G) と規定した。</p>
		</div>
		<div class="slide-list_item">
			<div class="slide-list_img">
				<img src="http://placehold.it/320x240/ffff00/ffffff">
			</div>
			<p class="slide-list_description">黄色（黃色、きいろ、オウショク）は、基本色名の一つであり、色の三原色の一つである。</p>
		</div>
	</div>
</div>

CSS

.slide-list_wrapper {
	width: 300px;
	margin: 0 auto;
}
.slide-list_img img {
	width: 100%;
	height: auto;
}
.slide-list_description {
	font-size: 12px;
}
.bx-pager-item {
	display: inline-block;
	margin: 0 8px;
}

JavaScript

$(function() {
	$('.slide-list').bxSlider({
		auto: true
	});
});

bxslider.jsを使って実装した場合のデモページ
　

対応方法

bodyに-webkit-text-size-adjust: 100%;を追加することで対応できました。

CSS

body {
	-webkit-text-size-adjust: 100%;
}

slick.jsで対応後のデモページ

bxslider.jsで対応後のデモページ

原因ですが、スライダーのように要素が横に並んで幅が広くなってしまう場合、-webkit-text-size-adjust: 100%;を設定していないとiOSが自動でフォントサイズを調整してしまうようです。
フェードで切り替えるようにして、要素を横にならべないようにするとテキストは大きく表示されませんでした。

JavaScript

$(function() {
	$('.slide-list').bxSlider({
		mode: 'fade',
		auto: true
	});
});

bxslider.jsでフェード切り替えのデモページ
　

【参考サイト】

• iPhone版Safariで文字サイズがおかしくなるときは-webkit-text-size-adjust: 100%; を指定する | memobits