web-dev-qa-db-ja.com

iPhoneおよびAndroid=でビューポートメタタグが機能しない

次のHTMLコードを使用しています

<!DOCTYPE HTML>
  <html>
    <head>
     <title>test</title>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
    <body>
    test
    </body>
  </html>

私の意図は、ユーザーがズームインまたはズームアウトできないようにすることです。上記のコードは、iPhoneおよびAndroidでは機能しません。解決策はありますか？

EDIT：ZoomがSettings>Accessibility>Zoomの下でOnとして選択されている場合、iPhone設定に表示されます。これはメタタグを上書きします。 ソース

それがAndroidで起こっている理由がわかりません。

androidiphonehtmlmeta-tagsviewport
18
Prabhat

このタグを使用して、すべてのモバイルプラットフォームでズームを防止します。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />

,ではなく;

5
ChristopheCVB

私の側では、Android（Nexus 5）とiPhoneでうまく機能するこの「ビューポート」を持っています。

<meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " />

これがお役に立てば幸いです。

4
Joffrey Outtier

ピンチズームを回避するには、このスクリプトを配置します。最新バージョンのSafari（メタタグが機能しない場合）

   document.documentElement.addEventListener('touchstart', function(event) {
     if (event.touches.length > 1) {
       event.preventDefault();
     }
   }, false);
3
neel upadhyay
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; height=device-height" />

samsung Galaxy S3でうまく機能しました

1
Adam Rifai

通常のiOS（11.3）ブラウザでは動作しなくなったようです。

ただし、ホーム画面に追加され、そこから起動された場合、Webページには影響します。

そのため、共有メニューをタップして[ホーム画面に追加]を選択し、そこから開くと、期待どおりにズームできなくなります。

<meta charset="utf-8" />
<title>luckydonald/SelfhostedMouse</title>
<meta name="Apple-mobile-web-app-title" content="SelfhostedMouse" />
<meta name="Apple-mobile-web-app-capable" content="yes" />
<meta name="Apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no; width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0">
1
luckydonald

コンテナに-webkit-flex：1を追加する必要がある場合があります（flexbox incourseを使用している場合）。ビューポートの問題が解決されました。

0
Anton Golova