ionic 2画面適合、ダイナミックサイズ調整
3986 ワード
私の今のプロジェクトはionic 2を使ってタブレットにソフトウェアを開発しています.1つ目は、画面の適合性に問題があることです.公式のサンプルコードは、タブレットに置くと、インタフェース要素が置けないという問題もあります.もちろん、小さな画面では、ソフトウェアにスクロールバーが表示されますが、視覚的および操作的にはソフトウェアのニーズを満たしていません.そのため、画面のサイズをダイナミックに調整するソフトウェアが必要です.
この方面でネット上でめったに答えを見つけることができなくて、私のこの白に対して、しかし困惑します.もちろんプロジェクトはやらなければならないので、探求して勉強しなければなりません.
一.初探
Ionic 2は実際に使われているhtml 5を使っていますが、ionic画面の適合を検索すると、ウェブ画面の適合が一般的に見られます.それからviewportなどと言いますが、一般的にはindexです.html.ヘッダーラベルに次の構成を追加
(画面幅をデバイス幅に設定し、ユーザーが手動でスケールを調整することを禁止)
しかし、ionicのindexファイルを開くと、この言葉が入っていることに気づきました.たとえば、私のionic 2プロジェクトのindexファイルは、次のように構成されています.
これは、画面幅がデバイスの画面と一致していることを意味する.比例は1対1で、すなわち拡大せず、縮小しない.同時に、手動サイズズームをオフにします.
二.なるほど
では、ダイナミックアダプティブスクリーンを実現したhybirdプロジェクトを見てやっと分かりました.ソースコードは見えませんが、ブラウザのデバッグ機能で見ました.そのレイアウトコード.半日検討したところflex属性が使用されていることが分かった.学習により,これが動的割り当て要素サイズのパラメータであることが分かった.その使用方法は概ねdivレイアウトを使用する.親divはflexプロパティを設定します.すべてのサブdivはflex=1.を設定します.子divの親divにおける均一な分布を実現することができる.flex=?を変更します.対応するスケールのレイアウトを実現できます.このパラメータを適用すると、画面サイズに合わせて自動的に調整するコントロールもない目的を実現しました.
もちろんここで言わなければなりません.親ラベルはheight=100%を設定します.で行ないます.このプロパティを使用すると、デバイスの画面のサイズに合わせてページが自動的にいっぱいになります.また、親ラベルの中央プロパティの設定も必要です.直感的で実用的です.ここにcssレイアウトコードを貼り付けます.
ここでは、一般的なWebページの例を完全に貼って、体験してみましょう.
この例の機能は、1つのページを実現し、いくつかの行に分けられ、各行に平均的に分布するブロックがいくつかあります).
例では属性height=“100%”;width: 100%;親ラベルから子ラベルまでの2つのパラメータを使用して、親要素を動的に満たすことができます.
このサンプルコードの効果は、マウスを引いてブラウザのサイズを調整すると、ページも動的に調整されます.モバイルデバイスに適用すると、画面のサイズに合わせて動的に画面がいっぱいになることを示します.
体験コードのcssは以下の通りです.
haha.css
また、flexレイアウトの説明については、この記事を参照してください.
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
もちろん、以上の方法を習得して、この知識をionicのページレイアウトに応用して、効果はとても良いです.
しかし、重要なのは、ionic 2のapiドキュメントに似たようなレイアウト要素が提供されていることです.
それはGridで、私が公式サイトのドキュメントを見ていないせいです.今、私はこのgridが、表の意味ではなく、レイアウト用であることに気づいた.それから私はこのレイアウトシステムで私のページを書き直して、実現した効果は同じです.その本質的な原理はflexレイアウトを使用している.(もちろん、スクリーンをフルに敷くと画面が適合するようにするには、親要素にheight:100%とwidth:100%のcssプロパティを設定する必要があります).
ブログを書く機会に自分も整理しておきます.apiドキュメントの最初の文を見てください.アドレス:
http://ionicframework.com/docs/v2/api/components/grid/Grid/
The grid is a powerful mobile-first flexboxsystem for building custom layouts. It is heavily influenced by Bootstrap's grid system.
このgridは最初の携帯電話のフレキシブルボックスのカスタムレイアウトシステムです.bootstrapのgridシステムの影響を受けている.
ここではionicが持参したgridシステムを用いて実現したダイナミックアダプティブスクリーンのコード例です
http://blog.csdn.net/robert_cysy/article/details/65443551
この方面でネット上でめったに答えを見つけることができなくて、私のこの白に対して、しかし困惑します.もちろんプロジェクトはやらなければならないので、探求して勉強しなければなりません.
一.初探
Ionic 2は実際に使われているhtml 5を使っていますが、ionic画面の適合を検索すると、ウェブ画面の適合が一般的に見られます.それからviewportなどと言いますが、一般的にはindexです.html.ヘッダーラベルに次の構成を追加
(画面幅をデバイス幅に設定し、ユーザーが手動でスケールを調整することを禁止)
しかし、ionicのindexファイルを開くと、この言葉が入っていることに気づきました.たとえば、私のionic 2プロジェクトのindexファイルは、次のように構成されています.
これは、画面幅がデバイスの画面と一致していることを意味する.比例は1対1で、すなわち拡大せず、縮小しない.同時に、手動サイズズームをオフにします.
二.なるほど
では、ダイナミックアダプティブスクリーンを実現したhybirdプロジェクトを見てやっと分かりました.ソースコードは見えませんが、ブラウザのデバッグ機能で見ました.そのレイアウトコード.半日検討したところflex属性が使用されていることが分かった.学習により,これが動的割り当て要素サイズのパラメータであることが分かった.その使用方法は概ねdivレイアウトを使用する.親divはflexプロパティを設定します.すべてのサブdivはflex=1.を設定します.子divの親divにおける均一な分布を実現することができる.flex=?を変更します.対応するスケールのレイアウトを実現できます.このパラメータを適用すると、画面サイズに合わせて自動的に調整するコントロールもない目的を実現しました.
もちろんここで言わなければなりません.親ラベルはheight=100%を設定します.で行ないます.このプロパティを使用すると、デバイスの画面のサイズに合わせてページが自動的にいっぱいになります.また、親ラベルの中央プロパティの設定も必要です.直感的で実用的です.ここにcssレイアウトコードを貼り付けます.
ここでは、一般的なWebページの例を完全に貼って、体験してみましょう.
この例の機能は、1つのページを実現し、いくつかの行に分けられ、各行に平均的に分布するブロックがいくつかあります).
例では属性height=“100%”;width: 100%;親ラベルから子ラベルまでの2つのパラメータを使用して、親要素を動的に満たすことができます.
このサンプルコードの効果は、マウスを引いてブラウザのサイズを調整すると、ページも動的に調整されます.モバイルデバイスに適用すると、画面のサイズに合わせて動的に画面がいっぱいになることを示します.
体験コードのcssは以下の通りです.
haha.css
.body {
position: fixed;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.nav {
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
}
.page {
display: flex;
align-items: center;
text-align: center;
margin: 0 auto;
height: 100%;
width: 100%;
background-color: #abaaaa;
padding-top: 5px;
padding-bottom: 5px;
flex-direction: column;
}
.row{
display: flex;
align-items: center;
height: 93px;
width: 100%;
background-color: #cdcecf;
}
.cell{
flex: 1;
text-align: center;
margin: 0 auto;
margin: 20px;
}
Integrion
また、flexレイアウトの説明については、この記事を参照してください.
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
もちろん、以上の方法を習得して、この知識をionicのページレイアウトに応用して、効果はとても良いです.
しかし、重要なのは、ionic 2のapiドキュメントに似たようなレイアウト要素が提供されていることです.
それはGridで、私が公式サイトのドキュメントを見ていないせいです.今、私はこのgridが、表の意味ではなく、レイアウト用であることに気づいた.それから私はこのレイアウトシステムで私のページを書き直して、実現した効果は同じです.その本質的な原理はflexレイアウトを使用している.(もちろん、スクリーンをフルに敷くと画面が適合するようにするには、親要素にheight:100%とwidth:100%のcssプロパティを設定する必要があります).
ブログを書く機会に自分も整理しておきます.apiドキュメントの最初の文を見てください.アドレス:
http://ionicframework.com/docs/v2/api/components/grid/Grid/
The grid is a powerful mobile-first flexboxsystem for building custom layouts. It is heavily influenced by Bootstrap's grid system.
このgridは最初の携帯電話のフレキシブルボックスのカスタムレイアウトシステムです.bootstrapのgridシステムの影響を受けている.
ここではionicが持参したgridシステムを用いて実現したダイナミックアダプティブスクリーンのコード例です
http://blog.csdn.net/robert_cysy/article/details/65443551