前回のuseragentを応用して、iPhoneXかそれ以外の機種かで判定して、
iPhoneXの場合はidを更新してそれに応じたcssを出すプログラム
を組みました。
なぜこの機能が必要かというと、iPhoneXにはノッチが存在するので、
その分高さがずれ込んでタブボタンの下に謎の余白が生まれてしまうためです。
本来ならばpadding-top: env(safe-area-inset-top);や
padding-top: constant(safe-area-inset-top);を使って合わせていくの
ですがこのままだとconstantやenvを正しく使うことができません。
何故かというと、今使っているCordovaのバージョンが7.1なのですが、
Cordova7.1プロジェクトで利用されているWebViewはUIWebViewを
使用しています。このUIWebViewは、constantやenvに対応していなく、
WKWebViewでないと正常な動作をしてくれないのです。
そこで、各iphoneの画面に応じてcssを変更するような
コードを書いてみました。
</pre>
<p class="p1"><span class="Apple-converted-space"> </span>#iphoneX_design{</p>
<p class="p1"><span class="Apple-converted-space"> </span>background-color: #FFF<span class="s1">;</span></p>
<p class="p1"><span class="Apple-converted-space"> </span>padding-top: 10px<span class="s1">;</span></p>
<p class="p1"><span class="Apple-converted-space"> </span>padding-bottom: 34px<span class="s1">;</span></p>
<p class="p1"><span class="Apple-converted-space"> </span>padding-left: 0px<span class="s1">;</span></p>
<p class="p1"><span class="Apple-converted-space"> </span>padding-right: 0px<span class="s1">;</span></p>
<p class="p1">}</p>
<pre>
</pre>
<p class="p1">var isiPhone = /iphone/i.test<span class="s1">(</span>window.navigator.userAgent.toLowerCase<span class="s1">());</span></p>
<p class="p1"><span class="Apple-converted-space"> </span>var isiBrowser = /chrome/i.test<span class="s1">(</span>window.navigator.userAgent.toLowerCase<span class="s1">());</span></p>
<p class="p1"><span class="Apple-converted-space"> </span>if<span class="s1">(</span>isiPhone<span class="s1">)</span>{</p>
<p class="p1"><span class="Apple-converted-space"> </span>var tmp = document.getElementById<span class="s1">(</span>"design"<span class="s1">);</span></p>
<p class="p1"><span class="Apple-converted-space"> </span>var val="iphoneX_design"<span class="s1">;</span></p>
<p class="p1"><span class="Apple-converted-space"> </span>tmp.setAttribute<span class="s1">(</span>"id"<span class="s1">,</span>val<span class="s1">);</span></p>
<p class="p1"><span class="Apple-converted-space"> </span>} else if<span class="s1">(</span>isiBrowser<span class="s1">)</span>{</p>
<p class="p1"><span class="Apple-converted-space"> </span>alert<span class="s1">(</span>"<span class="s1">ブラウザ使いです</span>"<span class="s1">);</span></p>
<p class="p1"><span class="Apple-converted-space"> </span>}</p>
<pre>
htnlからid「design」を取得し、setAttributeで新しいidとして
valの値を挿入していますね。
このvalは、cssの中で定義した「iphoneX_design」という
スタイルなので、これがidとしてすり替わった時に
iphoneXのデザインが組み込まれる仕組みになっています。
最初はこれをcomponentWillMountに組み込んでしまい
DOMが生成される前にidを検索していたので
エラーになりましたが、生成後のcomponentDidMount内で
処理をすれば生成後のDOMを操作することができるようになります。
動的に組み込む手段としてはこれが最適解かなと
思います。
