スマホで拡大縮小を無効にしたい

現在、チャットボットとやり取りできるサイトを作っています。
ユーザーが拡大縮小できないように設定したいのですが、「user-scalable=no」等による設定をしても、操作で拡大や縮小ができるようになってしまいます。

特にSafariではフォームをクリックするとその時点で拡大されてしまいます。

以下がソースコードになります。

html
1<html lang="ja">
2<head>
3    <meta charset="utf-8">
4    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
5    <!-- 共通CSS -->
6    <link rel="stylesheet" href="css/main.css">
7    <!-- ページごとCSS -->
8    <link rel="stylesheet" href="css/chatbot.css">
9
10    <!-- jQueryの指定 -->
11    <script src="js/jquery-3.2.1.min.js"></script>
12    <script src="js/jquery.mobile-1.4.5.min.js"></script>
13    <script src="js/chatbot.js"></script>
14</head>
15
16<body>
17    <header>
18        <div id="header"></div>
19        <!-- header.html -->
20    </header>
21    <nav>
22        <div id="nav"></div>
23    </nav>
24    <!-- ここから内容記述 -->
25    <div id="contents">
26        <!-- チャット表示 -->
27        <div id="chatbot">
28            <div id="wrapper">
29            </div>
30        </div>
31        <!-- end -->
32        <div id="last">
33            <div id="footer-fixed">
34                <div id="footer-bk">
35                    <div id="footer">
36
37                        <form action="chatbot.php" method="post" name="form1">
38                            <input type="text" id="chat" value="" name="formtext">
39                            <input type="hidden" name="result" id="result" value="">
40                            <button type="button" id="send" onclick="check();">送信</button>
41
42                        </form>
43                    </div>
44                </div>
45            </div>
46        </div>
47    </div>
48    <!-- end -->
49</body>
50</html>

js
1<script>
2document.documentElement.addEventListener('touchstart', function (event) {
3    if (event.touches.length > 1) {
4        event.preventDefault();
5    }
6}, false);
7 
8var lastTouchEnd = 0;
9document.documentElement.addEventListener('touchend', function (event) {
10    var now = (new Date()).getTime();
11    if (now - lastTouchEnd <= 300) {
12        event.preventDefault();
13    }
14    lastTouchEnd = now;
15}, false);
16</script>

css
1.question_Box {
2    margin-bottom: 8%;
3    width: 64vw;
4}
5/* スマホ版 */
6@media screen and (max-width: 760px) {
7
8    html{
9        background-color: white;
10    }
11
12    #contents {
13        position: absolute;
14        left:0;
15        width: 100vw;
16        height: 90vh;
17    }
18    
19    .arrow_question {
20        position: relative;
21        background: #c8cee3;
22        border-radius: 10px;
23        padding: 7%;
24        border: solid 0px #0000ff;
25        display: inline-block;
26        left: 8vw;
27    }
28
29    .arrow_question:after {
30        right: 100%;
31        top: 50%;
32        border: solid transparent;
33        content: " ";
34        height: 0;
35        width: 0;
36        position: absolute;
37        pointer-events: none;
38        border-color: rgba(200, 206, 227, 0);
39        border-right-color: #c8cee3;
40        border-width: 20px;
41        margin-top: -20px;
42        margin-right: -1px;
43    }
44
45    .arrow_answer {
46        position: relative;
47        background: #e0d6b4;
48        border-radius: 10px;
49        padding: 7%;
50        margin-left: 0;
51        width: 42%;
52        left:50vw;
53    }
54
55    .arrow_answer:after {
56        left: 100%;
57        top: 50%;
58        border: solid transparent;
59        content: " ";
60        height: 0;
61        width: 0;
62        position: absolute;
63        pointer-events: none;
64        border-color: rgba(224, 214, 180, 0);
65        border-left-color: #e0d6b4;
66        border-width: 20px;
67        margin-top: -20px;
68        margin-left: -1px;
69    }
70
71    body {
72        position: absolute;
73        height: auto;
74        left: 0;
75        
76    }
77
78    #chatbot {
79        width: auto;
80        padding-top: 20px;
81        height: auto !important;
82        padding-bottom: 80px;
83    }
84
85    div#footer-fixed {
86        position: fixed;
87        /* フッターの固定 */
88        bottom: 18px;
89        /* 位置(下0px) */
90        margin-left: 0;
91        /* 位置(左0px) */
92        width: 100%;
93        /* 横幅100%　*/
94        height: 40px;
95        /* 縦幅40px */
96        text-align: center;
97        left: 0;
98    }
99
100    div#footer-bk {
101        background: -webkit-linear-gradient(#58938d 50%, #4c857f 50%);
102        background: -o-linear-gradient(#58938d 50%, #4c857f 50%);
103        background: linear-gradient(#58938d 50%, #4c857f 50%);
104        padding: 10px 0 20px;
105        /* 上10px、下20pxをあける */
106        height: 10vw;
107        /* 縦の高さ17vw */
108        width: 100%;
109        /* 横の幅を100% */
110        border-top-left-radius: 20px;
111        /* 左上 */
112        border-top-right-radius: 20px;
113    }
114
115    div#footer {
116        height: 100%;
117        width: auto;
118    }
119
120    #chat {
121        position: relative;
122        width: 50vw;
123        height: 5vh;
124        border-radius: 10px;
125        margin: 1vw 1vw 4vw;
126        position: relative;
127        bottom: 8vw;
128    }
129
130    #send {
131        background: -webkit-linear-gradient(#ffffff 50%, #c6c6c6 50%);
132        background: -o-linear-gradient(#ffffff 50%, #c6c6c6 50%);
133        background: linear-gradient(#ffffff 50%, #c6c6c6 50%);
134        color: #000000;
135        border-radius: 10px;
136        width: 27vw;
137        height: 11vw;
138        margin: 25px 0 0 50px;
139        position: relative;
140        bottom: 27px;
141        right: 20px;
142    }
143
144    #send:hover {
145        opacity: 0.8;
146    }
147
148    /* chatbot */
149    #wrapper {
150        margin: 20px auto;
151        width: 96%;
152    }
153}
154

横幅などはすべて100vwに設定しております。

足りないソースコードや情報がありましたら随時追記いたしますので、よろしければご教授お願いいたします。

kei344

2019/01/29 05:31

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

mori-.-

2019/01/30 00:56

返信遅れて申し訳ありません。私の記述の仕方が悪かったのですが、元々画面の拡大縮小を操作でもできないようにしたい、というのが主な質問内容で、さらにフォームをクリックすると～という状況でした。質問内容書き換えます、申し訳ないです、、

kei344

2019/01/30 02:59

それは失礼しました。

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

回答1件

ベストアンサー

このあたりは試されましたか？

【iOSのinputで画面ズームがされないようにする方法】
http://shiru-web.com/2017/05/03/01-36/

追記：

ここの変更は試されましたか？

【iOS10のSafariでuser-scalable=no が効かなくズームがされる問題への対策 - Qiita】
https://qiita.com/peutes/items/d74e5758a36478fbc039

なお、いくつかのサンプルサイトでは0.3秒の判定で対策されてましたが、私の環境では0.45秒は必要でした。

バッファも考慮し、0.5秒(500ms)としました。

投稿2019/01/29 03:07

編集2019/01/30 03:02

kei344

総合スコア69400

mori-.-

2019/01/29 03:14

form内をクリックしたときにズームされてしまうものはこちらで治りました！ありがとうございます！

mori-.-

2019/01/30 04:16

はい、こちらも試したのですが、拡大ができてしまいます、最終手段と書かれているほうを有効にすると拡大問題も治らないうえに、inputタグなども反応しなくなってしまいました。

kei344

2019/01/30 05:56

コメント欄の部分も試されましたか？ > iOS11.3.1のSafariで、document.addEventListener()の第三引数を、trueから{capture:true, passive:false}（または{passive: false}）に変更しないとピンチイン・アウトを阻止できない様です。試したことについては質問文に追記されたほうが良いですよ。

mori-.-

2019/01/30 06:20

コメント欄まで見ておりませんでした、申し訳ありません。無事拡大縮小無効にできました！ありがとうございます。試したことについて質問文に追記すべきということも教えてくださりありがとうございます。以後、気を付けます

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