javascript - Phonegap アプリケーションのテキストとレイアウトが小さすぎる

Question

私は最近、html、css、javascript を使用して Android アプリを作成し、phonegap を介してそれらを実行して実際のアプリを作成しました。私が 1 台の電話で遭遇した問題の 1 つは、テキストが小さすぎることです。また、少し小さい画像もあります。ビューポート メタ タグを追加しましたが、どちらも機能しないようです。メタタグは次のとおりです。

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />`

見た目はこんな感じ

これはどのように見えるべきかです：

Answer 1

同じ問題があり、ビューポートを変更して解決しました。私も問題は phonegap だと思っていましたが、実際にはテストに使用されたデバイスの dpi が異なっていたことが原因でした。

私の解決策は、ビューポートの target-densitydpi を次のように変更することでした。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

それが役に立てば幸い

Answer 2

完全に削除するとtarget-densitydpi、最良の結果が得られるようです。

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

ほとんどの場合、アプリの外観を制御するにはこれで十分です。

Answer 3

Windows Phone (WP8) の場合、次の解決策を見つけました: https://github.com/phonegap/phonegap-app-developer/issues/92

1. css に追加: @-ms-viewport{ width: device-width; }
2. html に追加: <meta name="viewport" content="width=device-width, initial-scale=1" />

3. パッチ IE 10 に追加:

   (function() { if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile/10.0/)) { var msViewportStyle = document.createElement("style"); msViewportStyle. appendChild( document.createTextNode("@-ms-viewport{width:auto!important}") ); document.getElementsByTagName("head")[0].appendChild(msViewportStyle); } })();