BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

IphoneXなどのHtml5モバイル化

2022-01-31 01:40:01

iPhone Xのモデルがどのようなものかを見てみましょう。

上の画像では、Iphonex モデルにはヘッダーとボトムにこれら 2 つの新しい領域があります。したがって、私たちの Web アプリの表示を容易にするために、このモデルに適合させる必要があります
h5で作られたモバイルページのレイアウトは、head+torso+bottomの3カラムモードが一般的で、headとtopは固定、torsoのコンテンツはスクロールできるようになっています。 

 <div class="page">
    <header></header>
    <main></main>
    <footer></footer>
  </div>

しかし、IphoneX機種の新しいcssプロパティを使用せず、直接position: fixed; topを使用した場合。0 などの従来の書き方では、頭のナビゲーションバーが携帯電話自身のステータスバー（電源信号などを表示）に邪魔されたり、下のナビゲーションバーがIphoneX自身の呼吸光（写真では携帯電話下部の白いバー）に邪魔されて、ユーザーの操作や体験に支障をきたすケースがある。下部のナビゲーションバーがIphoneXの呼吸光（写真下部の白いバー）に遮られ、ユーザーの操作・体感に支障をきたす。

vueフレームワークを使用しているのですが、index.htmlのページで 

<meta name="viewport" content="width=device-width,viewport-fit=cover">

そして、各コンポーネントが表示されるapp.vueの公開ページでは、ルータービューに置き換えられるので、公開ヘッダーのトップバーはここで、以下のようなレイアウトで処理することが可能です。 

<template>
<div id="app">
<div class="placeholder_top" :style="{position:fixpositiona?'absolute':'fixed'}"></div>
<router-view class="routerview"></router-view>
</div>
</template>

上記のレイアウトで、クラスplaceholder_topのdivに以下のように記述します。 

.placeholder_top {
  position: fixed;
  top: 0;
  left: 0;
  width: 10rem;
  background-color: #303030;
  height: constant(safe-area-inset-top);
  height: env(safe-area-inset-top);
  z-index: 999;
}

この場合、我々のその後の、別のコンポーネントは、あなたがこのトップバーに対処する必要はありませんし、次の、我々は以前に述べた頭の問題に対処することができ、一般的なヘッドは、我々はほとんど公共のコンポーネントにカプセル化するので、ここで、我々はapp.vueのページに挿入した要素の影響により、我々の頭のCSS書き込みが、また少し頭のコンポーネントを変更する必要がありますページのレイアウトは、次のようになります。 

<template>
<header>
    <div class="title" :style="{position:fixposition?'absolute':'fixed'}">
    Navigation content
    </div>
    <div class="placeholder"></div>
    </header>
</template>

このページのcssは 

header{
background-color: #303030;
    .title{
    position: fixed;
    top:0;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    left: 0;
    height: 88px;
    z-index: 999;
    }
    .placeholder{
    height: 88px;
    width: 10rem;
    }
}

このように書くことで、ヘッダーナビゲーションバーは携帯電話のステータスバーの下に位置し、ウィンドウに影響を与えず、AndroidとIOSの両方のモデルに対応します（この種の互換性の問題はIOSのシステムの問題にも関わりますが、まだこの記事で取り上げていません）。

ここで、メインエリアを改めて見てみると、ヘッダー部品はすでに上で処理されているので、メインはそのまま以下のようにレイアウトされます。 

  main {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: calc(88px + constant(safe-area-inset-bottom));
padding-bottom: calc(88px + env(safe-area-inset-bottom));

ps:明確にするために、以下の2行は、現在のページに下部ナビゲーションバーがない場合に使用されます。 

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}

メインは中にレイアウトされ、コンテンツは直接書き込まれる

次に、一番下のフッターのレイアウトをご覧ください。 

<template>
<footer>
    <div class="foot" :style="{position:fixposition?'absolute':'fixed'}">
    Bottom content
    </div>
</footer>
</template>

ボトムコンテンツのcssは以下の通りです。 

footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 10rem;
    height: calc(88px + constant(safe-area-inset-bottom));
    height: calc(88px + env(safe-area-inset-bottom));
    background-color: #303030;
    .foot{
    position: absolute;
    top:0;
    left: 0;
    width: 10rem;
    height: 88px;
    }
}

こうすることで、下のナビゲーションフットのコンテンツが、携帯電話自身の呼吸の光で見えなくなることはありません

ということで、まとめると、今回のウェブアプリ化で必要になりそうなcssの書き方は以下のようになります。 

    position: fixed;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    top: calc(1rem + constant(safe-area-inset-top));
    top: calc(1rem + env(safe-area-inset-top));
    bottom: calc(1rem + constant(safe-area-inset-bottom));
    bottom: calc(1rem + env(safe-area-inset-bottom));

ps:上記の書き込みでは、書かれている :style="{position:fixposition?'absolute':'fixed'}" これは、ユーザーが入力ボックス、ポップアップソフトキーボード、不正確さの問題の位置のような固定要素をクリックして解決するには、研究に興味を持って、この記事では議論されません。
これは、ユーザーが入力ボックスをクリックし、ソフトキーボードをポップアップすると、このような固定要素の不正確な位置の問題を解決することです。 と書いている。

以上が今回の記事の内容です。皆様の学習のお役に立てれば幸いです。また、スクリプトハウスを応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します