web-dev-qa-db-ja.com

Android CSSでunit vhを使用してキーボードでビューポートと要素を縮小

非常に奇妙でユニークな問題が発生しています。

プロジェクトの性質上、すべてのページでpxではなくvhおよびvw CSSユニットを使用しています。

問題：Androidタブレットの場合、入力フィールドをタッチすると、デフォルトのキーボードがビューポートを押し、ページとページ内のすべての要素が縮小します。

IPadでは、キーボードが画面に重なって画面をプッシュしないため、この問題は発生しません。

Androidキーボードがブラウザのビューポートをプッシュせず、元のサイズを維持しないようにするための解決策を探しています。

注：私が残されている唯一のオプションは、ビューポートをプッシュするキーボードを回避することです。CSSユニットを変更したり、xml、manifestを使用したりすることはできません。これらは、この問題が発生しているWebページです。

javascriptandroidhtmlcss
20
Manu

これは古い質問ですが、アプリでもまったく同じ問題が発生しました。私が見つけた解決策はかなり簡単でした。 （私のアプリはAngularなので、これをapp.componentのngOnInit関数に入れますが、document.ready()またはその他の「初期化完了」コールバックは機能するはずです適切な実験で十分です）

setTimeout(function () {
        let viewheight = $(window).height();
        let viewwidth = $(window).width();
        let viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute("content", "height=" + viewheight + "px, width=" + viewwidth + "px, initial-scale=1.0");
    }, 300);

これにより、ビューポートメタはビューポートの高さを明示的に設定しますが、ハードコーディングは

<meta name="viewport" 
content="width=device-width, height=device-height, initial-scale=1">

androidのソフトキーボードを開いたときにデバイスの幅とデバイスの高さが変わるため、機能しません。

21
Tyler Merle

最近同じ問題に直面しましたが、いい解決策を見つけるのに時間がかかりました。私はhtml5、css3、angularjsを使用してCordovaアプリを設計しています。しかし、さらに、メディアクエリのトーンを書き込まず、最後に読み取り不可能なCSSを書き込まずに、アプリをすべての画面に適合させたいです。私はビューポートとvhから始めましたが、キーボードはすべてを壊しました。

したがって、使用する必要があるのは、次のような小さなjavascript（ここではjquery）です。

$("html").css({"font-size": ($(window).height()/100)+"px"});

これで、ビューポートがfont-sizeに影響を与えないことを除いて、「vh」を使用するのとまったく同じ方法で「rem」を使用できるようになりました。 "Rem"はhtmlルートのfont-sizeにのみ設定され、jqueryで画面の高さの1％に設定するだけです。

これが役立つことを願っています！

編集1：新しい問題に直面したので、ここで解決策を示します。ほとんどの場合、スマートフォンにはフォントサイズの最小制限があります。すべてのrem値を変更し、3または4で除算する必要があります。次に、JavaScriptを次のように変更する必要があります。

$("html").css({"font-size": ($(window).height()/25)+"px"}); /*(this is if you divide with 4)*/

SASSを使用している場合はさらに簡単です。除算を行うrem関数を作成できます。

1
Mayous

高さについても、この問題の影響を受けないように見える％またはvw（明らかな理由で影響を受けない）を使用できます。

0
Ced

Angular 4+

import {Meta} from "@angular/platform-browser";


constructor(private metaService: Meta){}

ngOnInit() {
  this.metaService.updateTag({
  name: 'viewport',
    content: `height=${this.height}px, width=${this.width}px, initial-scale=1.0`
  },
  `name='viewport'`
);
}
0
Joe Keene

ほぼ1年から後半までですが、このますます重要な問題に対する私の解決策も共有したいと思います。

DOMの完了後に読み込まれる小さなJS関数SETを作成しました。

特別なクラス（この場合は「.pheight」）に割り当てられたすべてのElementは、ビューポートの高さが減少してもサイズ変更されません。ビューポートの高さが増加したり、ビューポートの幅が変化した場合にのみ、サイズを変更できます。

したがって、私のアプリケーションでは完全に機能します！

  var docwidth = window.innerWidth;
  var docheight = window.innerHeight;
  function pheigt_init() {    
    pheigt_set_prevent_height();
    window.onresize = function() {
        if (docwidth !== window.innerWidth || docheight < window.innerHeight) {
            pheigt_upd_prevent_height();
        }
    };
  }
  function pheigt_set_prevent_height() {
    document.querySelectorAll('.pheight').forEach(function(node) {
     node.style.height = node.offsetHeight + 'px';
    });
  }
  function pheigt_upd_prevent_height() {
    document.querySelectorAll('.pheight').forEach(function(node) {
        node.style.removeProperty('height');
    }); 
    setTimeout(function(){ pheigt_set_prevent_height(); }, 100);
    docheight = window.innerHeight;
    docwidth = window.innerWidth;
  }
  document.addEventListener('DOMContentLoaded', pheigt_init());
0
MatWer