fix: Fix auto zoom in on focus message input in mobile view (#1196)

chohongm · web-flow · commit cbe660eff511 · 2024-08-21T15:42:26.000+09:00
Fixes [AC-3554](https://sendbird.atlassian.net/browse/AC-3554) ### Issue In mobile device, when users touches message input field, the device automatically zoom in to the input field. This is bad UX because user would have to manually zoom out. Disable auto zoom feature by adding user-scalable=no option. ### Changelogs - N/A [AC-3554]: https://sendbird.atlassian.net/browse/AC-3554?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
diff --git a/apps/testing/index.html b/apps/testing/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>Testing App</title>
   </head>
   <body>
diff --git a/samples/groupchannel/index.html b/samples/groupchannel/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>Vite + React</title>
   </head>
   <body>
diff --git a/samples/openchannel/index.html b/samples/openchannel/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>Vite + React</title>
   </head>
   <body>
diff --git a/samples/router/index.html b/samples/router/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>Vite + React + TS</title>
   </head>
   <body>
diff --git a/samples/typescript_sample/public/index.html b/samples/typescript_sample/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
