swiperで作ったスライダーをレスポンシブ対応したいです

前提・実現したいこと

楽天モールのトップページにswiperで作ったスライダーをレスポンシブ対応し、表示させたいです。
スマホは画像を3枚同時表示、
PCとタブレットは画像を6枚同時表示にしたく思います。
スマホとPCにはレスポンシブ適用できたのですが、
タブレットで見るとなぜかスライダーの画像が1枚ずつ表示（拡大される）されてしまいます。

どなたかお分かりになる方いらっしゃいましたらご意見いただけないでしょうか。

該当のソースコード（html、js）

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/reset.css">

<!--スライダー-->
<link rel="stylesheet" href="swiper/css/swiper-bundle.min.css">
<link rel="stylesheet" href="swiper/css/common.css">
</head>

<body>
<!--スライダーここから-->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><a href="#" target="_top"><img src="1.jpg"></a></div>
    <div class="swiper-slide"><a href="#" target="_top"><img src="2.jpg"></a></div>
</div>
</div>

<!--矢印-->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!--矢印ここまで--> 

<script src="swiper/js/swiper-bundle.min.js"></script> 
<script>
var mySwiper = new Swiper('.swiper-container', {
	autoHeight: true,
	freeMode: true,/*好きな位置までスワイプ*/
	spaceBetween: 5,/*画像同士の間隔-*/
	breakpoints: {
		320: {
			slidesPerView: 3,
		},
		768: {
	        slidesPerView: 6,
		},
	},
	autoplay: { /*オートプレー-*/
		delay: 4000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	loop: true, /*ループ-*/
	navigation: {
		nextEl: '.swiper-button-next', /*矢印次*/
		prevEl: '.swiper-button-prev', /*矢印前*/
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});	
</script> 
<!--スライダーここまで-->
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっと実機がないので完全に同じ状態は再現できていないのですが、
viewportにmaximum-scale=1を追加してみてはどうでしょうか？

html
1<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />

投稿2021/09/17 08:00

surface_0

総合スコア497

kimu05

2021/09/17 08:27

ご回答ありがとうございます！早速試してみたのですが、 Chromeの検証(デベロッパツール)では正常になっているのですが実際にipadで見ると崩れてしまっていて。。

surface_0

2021/09/17 08:38 編集

そうでしたか。あとは想像になりますが、1枚がどかっと画面いっぱいに伸びているということは、画像が大きすぎてるとかはありませんか？画像に対してwidth:100% や親divに overflow:hidden で調整したりというのもあるかと思います。実機が無いことにはこれ以上アドバイスできず申し訳ないですが、ご参考ください。

kimu05

2021/09/21 04:47

surface_0様ご連絡ありがとうございます！確認しましたところ、swiperのバージョンによって対応していないiosのバージョンがあるようで、スライダーが止まってしまってたようでした、、、たくさんアドバイスいただきありがとうございます！画像の大きさが確かに大きすぎる部分がありましたので調整いたしました。画像など誤ってた部分の調整面をアドバイスいただきましたのでベストアンサーとさせていただきます！

surface_0

2021/09/21 06:20

なるほど、swiper自体のバージョンによるものでしたか。自分は最新版が取得できるCDNを利用して試したので、バージョンを認識していませんでしたね。何はともあれ解決して良かったです。

kimu05

2021/09/21 07:09

ありがとうございました！

行動規範の内容に同意します