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

スマートフォンサイトでスライダーを配置したときに、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でフェード切り替えのデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年7月
 123456
78910111213
14151617181920
21222324252627
28293031