【初心者】アンドロイド端末だけレイアウトが崩れる時の対処法【CSSハック】

【初心者】アンドロイド端末だけレイアウトが崩れる時の対処法【CSSハック】 コーディング
2020.10.11
▼公式ライン始めました

公式ライン電気の相談窓口＠まーち電気

 

シバ男
シバ男
  • アンドロイド端末で見た時だけ、レイアウトが崩れてる！？
  • せっかく完成したと思ったのに、、、。つら
  • レイアウト崩れを解消する方法を知りたい。

     

    こんな疑問にお答えします。

    本記事の内容
    • CSSハックって？
    • アンドロイド端末でもレイアウトを崩さず表示させる方法

     

    先日頂いた案件で、アンドロイド端末から見たレイアウトだけ崩れてしまい、だだハマりしました。

     

    結論を言うと、「アンドロイド端末だけに適用されるCSSを書くこと」で解決可能です。

    僕の場合、「CSSハック」という言葉を知らず、解決に相当時間を要したので、同じような壁にぶち当たった方の早期解決に繋がればと思い記述しました。

     

    アンドロイド端末で、「フォントだけ適応されないんだよ」って方は、Webフォントを使うと解消できますよ。

    【手っ取り早く解決】アンドロイド端末でフォント(明朝体)を表示させる方法
    シバ男 アンドロイド端末だけフォント(明朝体)が表示されない。 ゴシック体で表示されるんだけど、、、。 アンドロイド端末でも、フォント(明朝体)で表示させる方法を知りたい。こんな疑問にお答えします。本記事の内容 アンドロイド端末で明朝体を表...
    march-blog.com

     

    スポンサーリンク

    CSSハックって？

    特定のプラウザ (OS) のみを対象に、CSSを適用させるテクニック

    プラウザ (OS)間の表示ズレを解消する為、特定のプラウザやOSを対象にCSSを記述する裏技のこと。

    崩れてるプラウザ(OS)に、個別でCSSを記述してレイアウト崩れを直そう。って感じですね。

     

    CSSハック（英：CSS Hack）は、Webサイト作成の際にWebブラウザ間（以下単に「ブラウザ」）で異なるCascading Style Sheets(CSS)の実装状況の違いやバグなどを吸収し、極力各ブラウザでの表示を同一にするためのテクニックの一つである。

    出典: フリー百科事典『ウィキペディア（Wikipedia）』

    まーち
    まーち

    人生で初めて、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ハック】

    まとめ│アンドロイド端末だけレイアウトが崩れる時の対処法【CSSハック】

    ✔アンドロイド端末でもレイアウトを崩さずに表示する方法

    • JavaScriptのコードを書き込む
    • アンドロイド端末だけに適用されるCSSを記述

    こうすることで、レイアウトが崩れず表示されます。

    僕のように、「アンドロイド端末だけレイアウトが崩れる！」といった状況に陥った場合に役立てば幸いです。

     

    というわけで今回は以上になります。

    この記事が参考になると嬉しいです。

    タイトルとURLをコピーしました