web-dev-qa-db-ja.com

モバイルデバイスでHTML本文が幅いっぱいに表示されない

（GWT）ページを通常のブラウザーで開くと、すべて正常に動作します。ボディは幅全体を占め、コンテンツは適切に中央に配置されます。しかし、これを携帯電話で試した場合、本体の幅全体が使用されないため、コンテンツが中央に配置されません。

なぜこのように表示されているのかわかりませんでした。また、本文とhtmlタグに100％の幅を追加しても問題は解決しません。

これをモバイルデバイスでうまく機能させる方法はありますか？

このページには以下からアクセスできます： http://www.vegantastic.de/ enter image description here

htmlcssmobile
17
jan

これは私を夢中にさせていたので、position:fixedからだへ

21
milpool

100％/ vwに設定されているにもかかわらず、bodyが全幅にならないのはなぜですか？

奇妙なことに、それはis全幅ですが、ビューポートはブラウザによって自動的に縮小されるため、オーバーフローするコンテンツに収まります。

これが当てはまるかどうかを確認するには、これをコンソールに入力します（1）：window.visualViewport.scale

1）2019年9月に編集： visualViewport：Chromeでのみ使用可能 -遅れて通知されます

0.8のようなものを返す場合、本体のサイズは正しいですが、ビューポートは縮小されます。

ダブルタップしてscale 1 and "fit-content-scale"（chrome dev-tools）のようなタッチシミュレーションが必要です。

オーバーフローしない方法body？

11
Breaker222

それはあなたのウェブページ上の非常に長いWordのためであるかもしれません。正しいビューポートメタタグを使用した後：

_<meta name="viewport" content="initial-scale=1.0, width=device-width">
_

私は、このテキストを、いくつかの空のHTMLドキュメント内の段落要素内に配置することにより、これを試しました。

<p>Here I have a text, and I am going to use a very long, and not-imaginary Word (oh it's real) inside. Without some Word-breaking CSS, the result will break the screen on smaller devices: Pseudopseudohypoparathyroidism</p>

携帯電話シミュレーターなしで画面サイズを小さくするとどうなりますか。

Decreased screen size without mobile phone simulator

そして、携帯電話のシミュレーターで画面サイズを小さくしたときに何が起こったのか：

Decreased screen size with mobile phone simulator

かなりの違い。ヒント：次のCSS属性を使用します。

_p {
    Word-break: break-Word;
}
_
7
Maarten Wolfsen

この質問の背後にある問題は解決されたことがわかりますが、同じ問題が発生しただけで、コメントに記載されているスクロールの無効化が原因で、ここでの回答を適用できませんでした。結果。

実験の結果、これはページ内の要素が回転していることが原因であることがわかりました。体の右端に近いため、高さがモバイルの障害になりました。

だから、私のような誰かがグーグル経由でこの質問を見つけた場合、私はこの答えを追加したいと思います：

この問題はさまざまな要因で発生する可能性があります。コンポーネントの幅の1つがモバイルビューで問題にならないかどうかを調査することをお勧めします。おそらく、ページにdivが長すぎるか、回転したdivがあり、マージンが本体から外れています。

2
Eddo

これをbodyタグに追加するだけで、問題が解決されます。

body {
  position: absolute;
 }
1
Marvin.H

私の場合、display: flex;グループからプロパティを削除すると、body（およびhtml）要素が通常に戻ります。調査の結果、自動計算された幅を持つすべての要素は、高さと幅があり、すべての子を体に巻き付ける要素内にある必要があることがわかりました。いくつかのoverflow:auto; position:relative;を親要素に追加した後、ディスプレイフレックスにネストされたディスプレイフレックスで本体が正しくスケーリングされます。

@import '../../variables.scss';
:Host {
  overflow: auto; // added this line
}

.top-bar {
    display: flex;
    flex-direction: row;
    padding: 10px;
    box-shadow: $shadow;
    position: relative;
    .search-item {
        flex: 1;
        margin: 0 1em;
        display: flex;
        flex-direction: row;
        position: relative;
        input {
            margin: 0;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-right-width: 0px;
            flex: 1;
            width: 1px;
        }
        button {
            margin: 0;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            border: 1px solid #ccc;
            border-left-width: 0px;
            box-shadow: inset $shadow;
        }
    }
    button.icon-only {
        border: none;
        background-color: transparent;
    }
}

メニューは次のようになります：

menu

before：before

後：after

1
Exit196

私も同じ問題を抱えていました。私の場合、多くの列とgrid-gapが50pxに設定されたgrid要素がありました。 htmlが拡大しました。小さな画面ではgrid-column-gapを減らすことをお勧めします。

0
badyl1g