web-dev-qa-db-ja.com

Android viewport setting "user-scalable = no" breaks width / zoom level of viewport

幅が640pxのWebアプリに取り組んでいます。

ドキュメントheadに設定しました

  <meta name="viewport" content = "width=640, user-scalable=no" />

そのため、コンテンツは適切に表示され、水平方向に引き伸ばされます。
これはiOSでは完全に機能しますが、Androidの場合、ブラウザーは拡大されたWebサイトを開くため、ユーザーはダブルクリックして縮小してページ全体を表示する必要があります。

次のようにuser-scalableタグを除外するようにビューポート設定を変更すると、

<meta name="viewport" content="width=640" />

Androidブラウザは640pxにうまく調整されます-機能します。
ただし、現在の問題は、user-scalableタグが設定されていないため、ユーザーがAndroidおよびiOSでズームインおよびズームアウトできること）です。

拡大縮小を禁止し、同時にAndroidでビューポートの幅を640pxに設定するにはどうすればよいですか？

androidiphonemobilebrowserviewport
18
Horen

ビューポートメタタグを次のようにレンダリングしてみます。

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

スケール設定を設定すると、ユーザーがズームできる距離にユーザー制限が設定されるため、初期値と最大値を同じ量に設定すると、問題が解決されます。

[〜＃〜] update [〜＃〜]：Androidデバイスをまとめて以下のように設定することで、私のバグを修正できました：

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

また、pタグなどの一部のコンテンツが画面全体に流れていないことにも気づきました。そのためのハックは、空の文字列を含むbackground-imageプロパティを、スタックしていてレイアウトビューを通過しないコンテンツに追加することです。これが今回のあなたの役に立つことを願っています。

36
Ben Sewards

私はモバイルが常に640px幅のウェブサイトを表示したかったのです。 （私が作成しなかったデザイン..）それにより、モバイルユーザーのズームを無効にしたいと思いました。私にとってうまくいったのは次のとおりです：

-2013年10月31日更新

まず第一に、Javascriptなしでこれを行う方法はありません。ユーザーエージェント文字列を確認する必要があります。したがって、mobile-viewport.jsを作成し、終了タグの直前にスクリプトを含めました。

function writeViewPort() {
    var ua = navigator.userAgent;
    var viewportChanged = false;
    var scale = 0;

    if (ua.indexOf("Android") >= 0 && ua.indexOf("AppleWebKit") >= 0) {
        var webkitVersion = parseFloat(ua.slice(ua.indexOf("AppleWebKit") + 12));
        // targets Android browser, not chrome browser (http://jimbergman.net/webkit-version-in-Android-version/)
        if (webkitVersion < 535) {
            viewportChanged = true;
            scale = getScaleWithScreenwidth();
            document.write('<meta name="viewport" content="width=640, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + '" />');
        }
    }

    if (ua.indexOf("Firefox") >= 0) {
        viewportChanged = true;
        scale = (getScaleWithScreenwidth() / 2);
        document.write('<meta name="viewport" content="width=640, user-scalable=false, initial-scale=' + scale + '" />');
    }

    if (!viewportChanged) {
        document.write('<meta name="viewport" content="width=640, user-scalable=false" />');
    }

    if (ua.indexOf("IEMobile") >= 0) {
        document.write('<meta name="MobileOptimized" content="640" />');
    }

    document.write('<meta name="HandheldFriendly" content="true"/>');
}

function getScaleWithScreenwidth() {
    var viewportWidth = 640;
    var screenWidth = window.innerWidth;
    return (screenWidth / viewportWidth);
}

writeViewPort();

スクリプトは、訪問者がAndroid（Chromeではない）またはFirefoxブラウザを持っているかどうかをチェックします。Androidブラウザは、width = 640とユーザーの組み合わせをサポートしていません。 scalable = false、そして奇妙な理由により、Firefoxブラウザーの画面幅が2倍になります。訪問者がWindows Phoneを使用している場合IE browser MobileOptimizedが設定されます。

7
pkmelee337

同じ状況でしたが、ユーザーがズームイン/ズームアウトできないようにコンテンツを常に画面の幅に合わせたい場合は、次のメタタグを使用します（これはどの幅を指定しても機能します）。

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
0
Nitin