意外な落とし穴！？CSSコーディングにおける iPhone での注意点・3つの事例 ｜ SiTest (サイテスト) ブログ

こんにちは、プロダクト開発チーム エンジニアの森永です。

以前の記事「モバイルファーストの時代。スマートフォン用ブラウザは2017年以降どうなる？」でも書きましたように、Webサイトの作成においてはモバイル用サイトを重視する傾向が強まってきております。

スマートフォン用ブラウザの機能もPC用ブラウザと比べて遜色ないレベルに近づいてきており、画面サイズに気をつければHTMLやCSSのコーディングは同じ感覚で出来るようになってきています。

しかしながら、PCで確認すると問題ないのにスマートフォンで見ると想定していた表示と異なっていたり画面が崩れていたりすることもまだしばしば発生することが現実問題として多々あります。

今回は、iPhone でCSSコーディングを行って実際に発生した3つの事例、およびその対応策について紹介いたします。

入力フォームなどのボタンが PCや Android スマートフォンと違う色、形になる場合があります。

入力フォームの送信ボタンなどでボタンを設置するケースは多いかと思います。また、CSSを使い、ボタンをブラウザデフォルトのものから見やすいものなどに変更することも多いかと思います。

例えば、以下のようなコードでボタンを設置する例を考えてみましょう。

HTML

<input type="button" class="sample_btn" value="ボタン">

CSS

.sample_btn{
  border: none;
  width: 100px;
  height: 30px;
  background-color: #0000ff;
  color: #ffffff;
}

上記のようにHTML、CSSのコードを記載すると、PCや Android では以下のようなボタンが表示されます。

しかし、iPhoneで表示すると……

このようにCSSで指定したスタイルがボタンに反映されません。

【原因と対策】

これは、input要素に対して iOS のデフォルトスタイルがかかってしまうことが原因で発生する現象です。

対策としては以下の2つの方法が挙げられます。

●対策1

CSSにおいて該当のボタンに対して以下の指定を行い、iOS のデフォルトスタイルを適用させないことで回避できます。

-webkit-appearance: none;

●対策2

input要素ではなくbutton要素を使うことによりこの現象を回避できます。button要素は閉じタグとの間にimgタグ(画像)を挟むことが出来るなど柔軟性も高いため、最近ではbuttonタグの使用を推奨する動きもあります。

<button type="button" class="sample_btn">ボタン</button>

実際にブラウザでの表示が確認できるサンプルを CodePen にアップいたしました。サンプルではボタンが表示されていますが、上から対策を施していないもの、対策1を施したもの、対策2を施したものの順となります。iPhone で表示すると違いがわかるかと思います。

iPhone でWebサイトを見ていると、突然文字が大きくなってはみ出てしまうことが稀に発生します。

毎回ではなく「稀に」発生することが厄介です。リロードすると直ってしまうことが多く、原因がつかめなくて悩んでいる方も多いのではないでしょうか。

【原因と対策】

この現象も iOS のデフォルトスタイルが原因で発生しています。 iOS では自動で文字の大きさを調整しようとする「-webkit-text-size-adjust」機能がオンになっているのですが、この機能が原因で大きくなってしまう現象が発生することがあります。

対策としては、常に自動調整時の倍率を1倍にする以下の指定をCSSに記載します。

body{
  -webkit-text-size-adjust: 100%;
}

参考サイト

iPhone版Safariで文字サイズがおかしくなるときは-webkit-text-size-adjust: 100%; を指定する

「CSSで大変動！？Windows Vistaのサポート終了がWebに及ぼす影響は」でも触れましたが、最近はブラウザの対応も進んで来ているためか Flexbox を採用するページも増えています。

しかしながら、以下のようなコードを書き実行すると iPhone で高さ、幅の指定が反映されず表示されない場合があります。

HTML

<div>
  <img src="test1.jpg">
  <img src="test2.jpg">
</div>

CSS

div{
  display: flex;
  margin-top: 0;
  padding-top: 0;
  max-width: 450px;
  flex-direction: column;
  justify-content: flex-end;
}
div img{
  height: 100%;
  max-width: 100%;
  margin-top: 0;
}

【原因と対策】

こちらに関しては iPhone 用 Safari 特有の Flexbox の不具合となります。親要素や子要素の高さを max-height、min-height、auto またはパーセンテージのみで設定した場合、子要素の高さが認識されない場合があります。

対策としては、高さを明示的に指定するか、親要素の justify-content (または align-items)プロパティを　stretch に指定することで回避できます。

こちらについても CodePen にサンプルをアップいたしました。PCでは画像が2つ表示されていますが、 iPhone で見ると画像が表示されず画面が真っ白となります。

参考サイト

Chrome / Safari not filling 100% height of a flex parent

今回紹介した3つの事例のように、PC上でのシミュレートを行った場合に問題なくても、実際にiPhoneで表示を行うと表示上の問題が発生する場合があります。

他にもブラウザによる表示の差異は多数残っているのが現状ですので、表示の確認はPC、モバイル、各ブラウザでまんべんなく行っていきましょう。