- アンドロイド端末で見た時だけ、レイアウトが崩れてる！？
- せっかく完成したと思ったのに、、、。つら
- レイアウト崩れを解消する方法を知りたい。
こんな疑問にお答えします。
- CSSハックって？
- アンドロイド端末でもレイアウトを崩さず表示させる方法
先日頂いた案件で、アンドロイド端末から見たレイアウトだけ崩れてしまい、だだハマりしました。
Webページ完成🙌
各端末で最終確認してると⭕️ PC ▶OK
⭕️ iOS ▶OK
❌ Android▶表示崩れるこの現象に、むちゃくちゃ悩んだ。
どーやらAndroidだけデザインが異なることがあるらしい▶Androidだけに適用されるCSSを書いたら解消しました#CSSハック なんて言葉知らんし🤣#プログラミング初心者
— まーち@収入の有るニートになる (@march_rys) September 23, 2020
結論を言うと、「アンドロイド端末だけに適用されるCSSを書くこと」で解決可能です。
僕の場合、「CSSハック」という言葉を知らず、解決に相当時間を要したので、同じような壁にぶち当たった方の早期解決に繋がればと思い記述しました。
アンドロイド端末で、「フォントだけ適応されないんだよ」って方は、Webフォントを使うと解消できますよ。
CSSハックって？
プラウザ (OS)間の表示ズレを解消する為、特定のプラウザやOSを対象にCSSを記述する裏技のこと。
崩れてるプラウザ(OS)に、個別でCSSを記述してレイアウト崩れを直そう。って感じですね。
CSSハック（英：CSS Hack）は、Webサイト作成の際にWebブラウザ間（以下単に「ブラウザ」）で異なるCascading Style Sheets(CSS)の実装状況の違いやバグなどを吸収し、極力各ブラウザでの表示を同一にするためのテクニックの一つである。
人生で初めて、CSSハックという言葉を知りました。
アンドロイド端末でもレイアウトを崩さず表示する方法
- JavaScriptのコードを書き込む
- アンドロイド端末だけに適用されるCSSを記述
上記、2つの手順を行うだけです。
JavaScriptのコードを書き込む
/* Android端末の場合「body」に「android」のクラスを自動で加える*/
<script>
if (navigator.userAgent.indexOf('Android') > 0) {
let body = document.getElementsByTagName('body')[0];
body.classList.add('Android');
}
</script><head>に上記コードを書き込むと、アンドロイド端末なら「body」に”Android”のクラスが自動で追加されるようになります。
<!-- アンドロイド端末の場合-->
<body class="Android">
<div id="text">
<P>アンドロイドで見ると「padding」が効かない</P>
</div>
</body>アンドロイド端末の場合、htmlはこんな感じになりますね。
JavaScriptが書き込めたら、cssをいじっていきます。
アンドロイド端末だけに適用されるCSSを記述
レイアウトが崩れてるタグに対して、アンドロイド端末にだけ適応されるコードを記述。
/*通常のコード*/
#text{
padding:10px;
}
/*アンドロイド端末だけに適用されるコード*/
.Android #text{
padding:10px;
}これで、Android端末でもレイアウトが崩れず表示されます。
アンドロイド端末で確認しつつ、コードを記述するほうが確実だよ。
使用したJavaScript
今回使ったJavaScriptのコードを紹介
勉強ついでにまとめました。
- Navigator：ウェブブラウザの情報を取得できるオブジェクト。
- userAgent：Navigatorのプロパティ。現在閲覧しているブラウザは何であるかを判別。
- indexOf：文字列の中に、指定文字列があるかどうかを調べるメソッド。
- document.getElementsByTagName()：タグ名からタグを取得する関数。ちなみにid名からの取得は、document.getElementById()。
- classList：クラス名を追加、削除、参照が出来るプロパティ。
- add：classListのメソッド。addは、クラスを追加する。
今回使ったJavaScriptの意味は、「閲覧してるプラウザの情報を取得して、アクセス端末を特定する。アンドロイド端末の場合、取得したタグ”body”に”Android”のクラスを追加する。」
こんな感じになりますね。
思ってたより簡単に出来るんだね。
判ると簡単なんだけどね、、、。
マジで悩んだ。
✔JavaScripが意味不明な方
JSのコードを見ると蕁麻疹が出るほど、毛嫌いしてましたが、、、。
試しに入門書を一冊読んだら、勉強が進むようになりました。
嚙み砕いて解説されてるので、複雑なJavaScriptを理解し易い。未経験で全く知識が無い僕には、入門書としても重宝してます。
JSまじで無理、、、。って方は試す価値有り
まとめ│アンドロイド端末だけレイアウトが崩れる時の対処法【CSSハック】
✔アンドロイド端末でもレイアウトを崩さずに表示する方法
- JavaScriptのコードを書き込む
- アンドロイド端末だけに適用されるCSSを記述
こうすることで、レイアウトが崩れず表示されます。
僕のように、「アンドロイド端末だけレイアウトが崩れる！」といった状況に陥った場合に役立てば幸いです。
というわけで今回は以上になります。
この記事が参考になると嬉しいです。