ビューポートの互換性の問題に関するコード例

私は最近モバイルウェブサイトを開発しましたが、viewportを使用するときにいくつかの問題が発生しました。

何度も試みた結果、現在の状況は、UC、Chrome、Androidの内蔵ブラウザ、safariのすべてが希望のズーム率に従って表示できるようになりました。

しかし、膨大な数のユーザーを持つ QQ ブラウザ では、ビューポートが認識できない (または使用できない) ようです。

コードは次のとおりです:

HTML

<meta id="viewport" content="
    target-densitydpi=device-dpi, 
    user-scalable=no, 
    width=device-width, 
    initial-scale=0.5" name="viewport" />

JavaScript

var viewPortScale;
var dpr = window.devicePixelRatio;
if(dpr <= 2) {
    viewPortScale = 1 / window.devicePixelRatio;
} else {
    viewPortScale = 0.5
}

document.getElementById(&#39;viewport&#39;).setAttribute(
        &#39;content&#39;, 
        &#39;user-scalable=no, 
         width=device-width, 
        initial-scale=&#39; + viewPortScale);

// alert(viewPortScale);

Ifアラート コメントを削除すると、QQ ブラウザに必要なズーム率を示すポップアップが表示されますが、それでも必要な拡大縮小が行われません。

【関連推奨事項】

1.

特別な推奨事項: 「php Programmer Toolbox」V0.1バージョンのダウンロード

2. モバイルでの垂直画面切り替えの問題を解決するためのビューポート属性の共有ターミナルと横画面フォント リセットの問題の例

3.

ビューポートの特別なトピック: CSS でのレスポンシブ Web デザインの詳細 - ビューポート

4. HTML5 のビューポートのパラメーターとその使用方法の紹介

以上がビューポートの互換性の問題に関するコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。