web-dev-qa-db-ja.com

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

最近、Android html、css、javascriptを使用してアプリを作成し、phonegapで実行して実際のアプリを作成しました。一部の画像も少し小さく、ビューポートメタタグを追加しましたが、機能しないようです。メタタグを次に示します。

    <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" />`

これは見た目です
This happens in a particular phone(Samsung Galaxy)

これがどのように見えるかです：
This is how it looks in htc wildfire s

javascripthtmlcssjquery-mobilecordova
51
lomas09

同じ問題があり、ビューポートを変更して解決しました。また、問題は電話のギャップだと思っていましたが、実際にテストに使用したデバイスの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" />

それが役に立てば幸い

144
MazarD

私は同様の問題を抱えていて、共有する価値があると思ったいくつかの研究をしました：

  • 既に提案したように、ビューポートのtarget-densitydpiをmedium-dpi（= 160dpi）に設定します。これにより、pxユニットが仮想化されます。 html/cssの1pxは、320dpiデバイスの2つの物理ピクセルに対応します。画像も同様に拡大縮小（およびぼかし）されることに注意してください。

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

  • CSS：メディアクエリを使用して条件付きスタイリングを実装します。幅、高さ、アスペクト、または向きに応じて異なる画面サイズに適応するのは簡単です。 device-pixel-ratioでさまざまなピクセル密度を処理できます（例を提供してくれたMarc Edwardsに感謝： https://Gist.github.com/marcedwards/3446599 ）。

    @media screen and (-webkit-min-device-pixel-ratio: 1.5),
       screen and (-o-min-device-pixel-ratio: 15/10)
{
  body { background-image: ... } /* provide high-res image */
}

    メディア機能resolutionはdevice-pixel-ratioよりもきれいですが、モバイルブラウザのサポートがありません。

  • Javascript：window.devicePixelRatioおよびwindow.screen.widthおよびwindow.screen.heightに基づいてボタンサイズ、画像などを調整します。 Javascriptごとのレイアウトは悪い習慣と見なされます。また、pageloadイベントの後に実行が開始されるため、読み込み中にちらつきが発生する場合があります。

  • -webkit-image-setおよび画像src-setを使用すると、Retinaディスプレイ用の高解像度画像を簡単に提供できます。 http://www.html5rocks.com/en/mobile/high-dpi/#tocを参照してください-bff 。ブラウザのサポートは制限されています。

     background-image: -webkit-image-set(
   url(icon1x.jpg) 1x,
   url(icon2x.jpg) 2x
 );
7
vodov

target-densitydpi全体で最高の結果をもたらします。

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

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

5
Francesco Frapporti

target-densitydpi = medium-dpi私たちのために働いた。

EeがPhoneGap 2.2から3.3にアップグレードしたときに、この問題に直面しました。

4
apachebite

更新された回答：forAndroid

問題はAndroidデバイスにこのAccessibilly設定があります。フォントサイズを変更してみてください（searchfont sizeon Android setting）そしてアプリを再度実行します。

したがって、アプリのフォントは設定に従って変更されます

Accessibilly font size

コルドバのソリューションはこちら

：を使用 モバイルアクセス 無効化するにはPreferredTextZoom

Cordovaプロジェクトにmobile-accessibilityをインストールします

$ cordova plugin add https://github.com/phonegap/phonegap-mobile-accessibility.git

そしてJS partは次のようなものです：

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
   if (window.MobileAccessibility) {
      window.MobileAccessibility.usePreferredTextZoom(false);
   }
}
1
l2aelba

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）;}}）（）;

0
Gerfried