画面サイズ
私たちがよく知るiPhoneシリーズの開発規模をまとめると次のようになります。
△iPhone各モデルの開発規模既知のピクセル サイズに変換します。
△各モデルの多次元寸法倍率マップは実際には画素サイズと現像サイズとの倍率関係を表しますが、これは表面上のものにすぎません。倍率に影響を与える中心的な要素は PPI (DPI) です。画面密度とさまざまなサイズの関係を理解すると、倍率の概念を深く理解できます。「基本を学ぼう!」デザイナー向けDPIガイド》
今回のアップグレードでは、iPhone8の画面サイズと解像度はiPhone6以降の優れた伝統を継承しており、iPhone8の画面サイズと解像度はiPhone6以降の優れた伝統を継承しています。
ただし、iPhone X は画面サイズ、解像度、形状に至るまで大きな変更を加えています。iPhone 8 を参考にして、iPhone X の適応をどのように検討すべきかを見てみましょう。
iPhone Xのサイズの変化を見てみましょう。
2.iPhoneX適応---安全領域（安全領域）iPhone Xのデザインレイアウトに対するAppleの見解は以下の通りです。
コア コンテンツは、デバイスの丸い角 (コーナー)、センサー ハウジング (センサー ハウジング、フルバン)、下部のホーム インジケーターによって隠されないように、安全領域に配置する必要があります。言い換えれば、表示するように設計されているコンテンツは、できる限り安全な領域内にある必要があります。
3. iPhoneX の適応---適応スキーム viewport-fit 3.1 PhoneX の適応、iOS 11 では viewport-fit のメタタグが適応スキームとして使用されます。viewport-fit のデフォルト値は auto です。viewport-fit の値は次のとおりです。
| 自動 | デフォルト: viewprot-fit:contain ページのコンテンツは安全領域に表示されます。 |
| カバー | viewport-fit:cover、ページコンテンツが画面いっぱいに表示されます |
viewport-fitメタタグ設定（カバー時）
<meta name=viewport content=width=device-width,initial-scale=1.0, minimum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover>
3.2 CSS constant() 関数とsafe-area-inset-top &safe-area-inset-left &safe-area-inset-right &safe-area-inset-bottomの概要
上に示したように、iOS 11 の WebKit には、新しい CSS 関数 constant() と、4 つの事前定義定数セット (safe-area-inset-left、safe-area-inset-right、safe-area -inset-top、safe) が含まれています。 -エリア-差し込み-底部。組み合わせると、スタイルが各アスペクトの安全領域のサイズを参照できるようになります。
3.1 viewport-fit:contain を設定すると、safe-area-inset-left、safe-area-inset-right、safe-area-inset-top、safe-area-inset-bottom などが設定されます。パラメータは効果がありません。
3.2 viewport-fit:cover を設定すると、設定は次のようになります。
body {padding-top: constant(safe-area-inset-top); //ナビゲーションバーとステータスバーの高さは88pxですpadding-left: constant(safe-area-inset-left); //垂直ではありません Is 0 padding-right: constant(safe-area-inset-right) // 画面が垂直でない場合は 0 padding-bottom: constant(safe-area-inset-bottom);//下部の円弧の高さは 34px です } 4. iPhoneX への適応 --- 身長統計ビューポートフィット:カバー + ナビゲーション バー
5. iPhoneX への適応 --- メディアクエリここでは 812 ピクセルではなく 690 ピクセル (安全領域の高さ) が使用されていることに注意してください。
@media のみの画面と (幅: 375px) と (高さ: 690px){ body { 背景: blue }} 6.iphoneXビューポートフィット問題の概要1. iPhoneX ページでグラデーション カラーが使用されている場合、viewport-fit:cover;
1.1 単色とグラデーション色の違いは、背景色が設定されている場合に設定されます。単色の場合は画面全体に塗りつぶされます。グラデーション色が設定されている場合は、その高さでのみ描画されます。子要素; ページの高さはわずか 690px です。
本体は次のように固定されています。
<body><div class=content>これはサブ要素です</div></body>
1.モノクロの場合：
* { パディング: 0; マージン: 0; } body { 背景:緑: 定数(セーフエリアインセットトップ) //パディング左: 定数(セーフエリアインセット左) );*/ /*パディング右: 定数(セーフエリアインセット右);*/ /*パディングボトム: 定数(セーフエリアインセットボトム);*/ }2. グラデーションカラー
* { パディング: 0; マージン: 0; } body { 背景:-webkit-gradient(linear, 0 0, 0bottom, from(#ffd54f), to(#ffaa22)); -inset-top); //88px /*パディング左: 定数(セーフエリア-インセット左);*/ /*パディング右: constant(safe-area-inset-right);*/ /*padding-bottom: constant(safe-area-inset-bottom);*/ }グラデーションカラーを使用しても画面全体を埋める問題を解決する方法は次のとおりです。
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1, viewport-fit=cover> <title>iPhone X 向けの Web サイトのデザイン: 安全領域の尊重</title> <style> * { パディング: 0; マージン: 0; } html, body { 高さ: 100%; } body { パディングトップ: 定数(セーフエリアインセットトップ);定数(セーフエリアインセット左); パディング右: 定数(セーフエリアインセット右); パディングボトム: 定数(セーフエリアインセットボトム); gradient(linear, 0 0, 0 底, from(#ffd54f), to(#ffaa22)); 幅: 100%; 高さ: 724px; </style></head><body><div class=content>これはサブ要素です</div></body></html>2. ページ要素は固定位置調整を使用します: {position:fixed;}
2.1 子要素ページが下部に固定されている場合、viewport-fit:contain を使用すると、bottom:0 が表示されると安全領域にのみ表示されることがわかります。
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1> <!--<meta name=viewport content=initial-scale=1, viewport-fit=cover>--> <title>iPhone X 向けの Web サイトのデザイン: 安全領域の尊重</title> <style> * {padding: 0; margin: 0 } /*html,body {*/ /*height: 100%;*/ /*}*/ body { 背景: グレー; /*パディングトップ: 定数(セーフエリアインセットトップ);*/ /*パディング左: 定数(セーフエリアインセット左) );*/ /*padding-right: constant(safe-area-inset-right);*/ /*padding-bottom: constant(safe-area-inset-bottom);*/ } .top { width: 100%; 高さ: 44 ピクセル; .bottom { 位置: 左: 0; 高さ: 44 ピクセル; </style> head><body> <div class=top>これが上です</div> <div class=bottom>これが下です</div></body></html>2.1 子要素ページが下部に固定されている場合、viewport-fit:cover を使用すると、bottom:0 が安全領域にのみ表示されることがわかります。
html,body {幅:100%;高さ:100%} を追加します
図1:
* { パディング: 0; マージン: 0; } html,body { 高さ: 100%; } ボディ { 背景: 定数 (セーフエリア-インセットトップ);エリアインセット左); パディング右: 定数(セーフエリアインセット右); パディングボトム: 定数(セーフエリアインセットボトム);幅: 100%; 高さ: 44px; .bottom { 位置: 0; 右: 0; 色: 黒;図2:
* { パディング: 0; マージン: 0; } html,body { 高さ: 100%; } ボディ { 背景: 定数 (セーフエリア-インセットトップ);エリアインセット左); パディング右: 定数(セーフエリアインセット右); /*パディングボトム: 定数(セーフエリアインセットボトム);*/ } .top { 幅: 100%; 高さ: 44px; } .bottom { 位置: 0; 左: 0; 色: 緑;2.3alertView ポップアップ マスク レイヤーの解決策
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=width=デバイス幅、initial-scale=1.0、minimum-scale=1.0 、最大スケール = 1.0、ユーザー スケーラブル = いいえ>--> <メタ名 = ビューポートcontent=width=デバイス幅、初期スケール=1.0、最小スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ、ビューポートフィット=カバー> <meta http-equiv=pragma content=no-cache > <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <title>alertView</title> <script data-res=eebbk> document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px'; </script> <style> * { margin: 0 } html,body { width: 100%; 高さ: 100%; ボディ { フォントサイズ: 0.32rem;定数(セーフエリアインセットトップ); パディング左: 定数(セーフエリアインセット左); パディング右: 定数(セーフエリアインセット右); -inset-bottom); } .content { テキスト整列: 中央; } .testBut { マージン: 50px 高さ: 44px; 1px ソリッドダークグレー; ユーザー選択: なし; </style> <link href=alertView.css rel=stylesheet type=text/css></head><body> class=content> <button class=testBut onclick=showLoading()>ポップアップ読み込み</button> </section> <script type=text/javascript src=alertView.js></script> <script> function showLoading() { UIAlertView.show({ type:input, title: 暖かいリマインダー, //タイトルの内容: VIP メンバーシップの有効期限が近づいています, // 新しい isKnow を取得: false }); var xx = 新しい UIAlertView() } </script></body></html>要約する上記は、iPhoneX への HTML5 ページの適応について編集者が紹介したものです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！