スライダー「Slick」スマホ表示が縮小表示される

スライダー「slick」でレスポンシブスライダーを作りました
PCでブラウザーの幅を狭くしていくと問題なくレスポンシブ動作しますが
スマホ（iphoneとAndroid)で確認したところ幅を900pxと認識しているようで
900px幅の物が縮小されてスマホに表示されてしまいます

※画像サイズは横：145px 縦：200pxのサイズです。
スマホ表示は画像2枚にしたいのですが
どのようにカスタマイズすればよいのかわかりません。

ご教示いただけますでしょうか

宜しくお願いいたします。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <title>Slick Playground</title>
5  <meta charset="UTF-8">
6<link rel="stylesheet" type="text/css" href="./slick/slick.css" media="screen" />
7<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css" media="screen" />
8<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
9<script src="./slick/slick.min.js"></script>
10<style type="text/css">
11body{
12margin: 10px 40px;
13}
14#slider {
15    width: 100%;
16    margin: 0 auto;
17}
18#slider img {
19    width: 100%;
20}
21.slider div {
22    height: 200px;
23}
24    .slick-prev:before,
25    .slick-next:before {
26        color: black;
27    }
28</style>
29</head>
30<body>
31    <div><img src="1.jpg"></div>
32    <div><img src="2.jpg"></div>
33    <div><img src="3.jpg"></div>
34    <div><img src="4.jpg"></div>
35    <div><img src="5.jpg"></div>
36    <div><img src="6.jpg"></div>
37    <div><img src="7.jpg"></div>
38    <div><img src="8.jpg"></div>
39    <div><img src="9.jpg"></div>
40    <div><img src="10.jpg"></div>
41    <div><img src="11.jpg"></div>
42    <div><img src="12.jpg"></div>
43    <div><img src="13.jpg"></div>
44    <div><img src="14.jpg"></div>
45    <div><img src="15.jpg"></div>
46    <div><img src="16.jpg"></div>
47    <div><img src="17.jpg"></div>
48    <div><img src="18.jpg"></div>
49  </section>
50
51<script type="text/javascript">
52$(function() {
53    $('.multiple-item').slick({
54          infinite: true,
55          dots:true,
56          slidesToShow: 11,
57          slidesToScroll: 3,
58          responsive: [{
59               breakpoint: 1600,
60                    settings: {
61                         slidesToShow: 8,
62                         slidesToScroll: 2,
63               }
64          },{
65               breakpoint: 1200,
66                    settings: {
67                         slidesToShow: 6,
68                         slidesToScroll: 2,
69                    }
70               },{
71               breakpoint: 940,
72                    settings: {
73                         slidesToShow: 4,
74                         slidesToScroll: 2,
75                    }
76               },{
77               breakpoint: 600,
78                    settings: {
79                         slidesToShow: 3,
80                         slidesToScroll: 2,
81                    }
82               },{
83               breakpoint: 480,
84                    settings: {
85                         slidesToShow: 2,
86                         slidesToScroll: 2,
87                    }
88               }
89          ]
90     });
91});
92
93</script>
94</body>
95</html>

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

回答1件

ベストアンサー

head内に下記を追記してみてください。

HTML
1<meta name="viewport" content="width=device-width, initial-scale=1">

投稿2017/06/04 07:49

kei344

総合スコア69398

efu_akio

2017/06/04 08:30

2日間悩んでましたが一発で解決しました。本当にありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

スライダー「Slick」スマホ表示が縮小表示される

関連した質問