ホームページ > ウェブフロントエンド > htmlチュートリアル > ビューポートの互換性の問題に関するコード例

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

零下一度
リリース: 2017-05-17 13:20:18
オリジナル
1782 人が閲覧しました

私は最近モバイルウェブサイトを開発しましたが、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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート