初めに
AngularでWebアプリを開発している時にOnsenUIのOnsPlatform.isIPhoneXでiPhone13が判定されなかった際の解決策を記載します。
実装コード
実行したコードは以下のコードです。
if (onsPlatform.isIPhoneX()) { // iPhone X であるか否かを判定
// <html> 要素に属性を追加（値として空文字列を設定）
console.log(onsPlatform.isIPhoneX());
document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
iPhone13miniの場合
true
iPhone13の場合
false
どうしてだ？？
対処法
とりあえず、iPhoneの判定をどのように行っているかをonsenuiのコードを確認してみました！
key: 'isIPhoneX',
value: function isIPhoneX() {
return this.isIPhone() && (window.screen.width === 375 && window.screen.height === 812 || // X, XS portrait
window.screen.width === 812 && window.screen.height === 375 || // X, XS landscape
window.screen.width === 414 && window.screen.height === 896 || // XS Max, XR portrait
window.screen.width === 896 && window.screen.height === 414 ||
ウィンドウのサイズから判断していることがわかりました。つまり、iPhone13用のサイズを定義すれば、サイズを判定されるはず。ということで以下のようにソースコードを変更しました。
key: 'isIPhoneX',
value: function isIPhoneX() {
return this.isIPhone() && (window.screen.width === 375 && window.screen.height === 812 || // X, XS portrait
window.screen.width === 812 && window.screen.height === 375 || // X, XS landscape
window.screen.width === 414 && window.screen.height === 896 || // XS Max, XR portrait
window.screen.width === 896 && window.screen.height === 414 || // 12, 12 Pro
window.screen.width === 390 && window.screen.height === 844 || // portrait
window.screen.width === 844 && window.screen.height === 390 || // landscape
window.screen.width === 428 && window.screen.height === 926 || // portrait
window.screen.width === 926 && window.screen.height === 428 // landscape
実行結果
true
最後に
これから、フロントエンドやバックエンドの記事を投稿していきます。ぜひご覧ください