iOS(iPhone・iPad)のCSSハック12個 スマートフォンサイトでやっておくべき設定

iOS(iPhone・iPad)のCSSハック

Macを含むSafari向けと、iOS(iPhone・iPad)特有のCSSハック 12個。Chrome(Blink)も

iOS(iPhone・iPad)のCSSハック

スマートフォンサイトやレスポンシブWebデザインでやっておくべきCSS設定

  • Safariの明朝をゴシックに:font-family
  • iPhoneなどで縦横画面でフォントサイズが変わる:-webkit-text-size-adjust
  • リンク長押しのポップアップ:-webkit-touch-callout
  • iPhoneなどのフォーム:-webkit-appearance
  • iPad横で画面が動いたり、切れたり:overflow-xとviewport
  • Safariの等幅フォント
  • フラットデザインはボックスを意図したサイズに:box-sizing
  • ボックスの外枠の角を丸める:border-radius
  • iPhoneやiPadで横スクロールバー:-webkit-scrollbar
  • Safari専用CSSハック:-webkit-min-device-pixel-ratio:0
  • Chrome(Blink)専用CSSハック:min-resolution: .001dpcm
スポンサーリンク

Safari(Macを含む)は明朝(serif)がデフォルト font-familyでゴシック(sans-serif)に替える

Macを含むSafariでは、明朝(serif)がデフォルトなので、ゴシック(sans-serif)を設定する。

* { font-family: sans-serif; }

スマートフォン、AppleのiPhone対応がメインなら、日本語はヒラギノを一番にしているサイトも多いだろう。
またGoogle・Androidを意識すればNoto Sans。たしかAndroidの標準フォントになるはずだ。

* { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", "メイリオ",sans-serif; }

もっとも、このように設定しなくても、iOS(iPhone・iPad)ではヒラギノで表示されるのだが…
いつからか、明朝体で表示されるようになっている。やはり、フォント設定は必須か。

iOS(iPhone・iPad)はデバイスの縦横でフォントサイズが変わる -webkit-text-size-adjust

iOSのデバイス縦横でフォントサイズが変わるので、それを阻止。

body { -webkit-text-size-adjust: none; }

タップターゲットの長押しポップアップを阻止 -webkit-touch-callout

タップターゲット(いわゆるリンク)を長押しすると出てくるポップアップ
これを阻止するには、

a { -webkit-touch-callout: none; }

他の多くのサイトとは違う操作感になるので、最近は止めている。
(なにより、自分たちさえとまどうことに(笑))

iOS(iPhone・iPad)のフォームボタンなどのデザイン変更 -webkit-appearance

Appleもフラットデザインにしようとしているのか、よく分からないが、フォームボタンなどは従来型の丸々となったままだ(笑)
これをなんとかしたいときは、その箇所に次のように設定する。

セレクタ { -webkit-appearance: none; }

サイト丸ごとなら

* { -webkit-appearance: none; }

iPad横でスワイプすると画面も動く overflow-x

不思議なことに、iPad横画面のときに、スワイプ(スクロール)させると上下だけでなく左右にも画面が動くサイトやページがある。

自サイトでそんなことが起こっていたら、ユーザーは鬱陶しくてたまらないので、次のようにCSSを設定する。

html, body { overflow-x: hidden; overflow-y: auto; }

不思議が重なるのだが、bodyだけではダメで、その上のhtmlまで設定しないと、効かないようだ。
また、下記のように設定すると、このSEO塾.comのファーストビューの画像のところもおかしくなる…

* { overflow-x: hidden; overflow-y: auto; }

iPad横で画面が切れる viewport

じつはこのサイトも、iPad横で右が少し切れている…

検索してみると、まず「viewport」をきっちり設定

<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />

しかし、テンプレートで設定済み…
ちなみに、開発元のイーティーネット社は匠なので、Android用では別の「viewport」に切り替えられる。
(リセットCSSなど、他の無料有料テンプレートでは無頓着なものにも、配慮が行き届いている…)

<meta name="viewport" content="width=device-width, initial-scale=0.66, minimum-scale=0.66, maximum-scale=2.0" />

さて話を戻して、iPad横で画面が切れるときの手当ては、「viewport」に画面サイズを指定、

<meta name="viewport" content="width=画面サイズ, …" />

そして、CSSで

html, body { width: 100%; }

このサイトでは、「viewport」に画面サイズを設定すると、かなりぐちゃぐちゃになる。
やはりダメだ。

他の改善法をご存じの方は、教えていただければありがたい。

Safari iOS(iPhone・iPad)の等幅フォント

まず、MacのSafariで等幅(monospace)を指定すると、デフォルトでは「Osaka-Mono」で表示されて、これが情けない感じになる…
このページなどのようにコードを半角英数でそれなりに分かりやすく表示させるには、「Courier New」がいい。
また、お気に入りはMicrosoftの「Consolas」。

そこで、等幅フォントの設定は次のようにしている。

code { font-family: "Consolas", "Courier New", monospace; }

といっても、これはMacのSafariだけ、iOS(iPhone・iPad)では等幅フォント指定のときは「Times New Roman」で表示されるらしい。

WP Code Highlight.js導入でcodeのフォントはリセット

ソースやコードの表示のために、WP Code Highlight.jsを採用したので、ここのcode用フォントConsolasは設定しなくなっている。

フラットデザインのボックス box-sizing

フラットデザインではボックスの段組が基本になることが多いので、パソコンとタブレット横で4個、タブレット縦とスマートフォン横で2個、スマートフォン縦で1個などと、表示させたい。
そこで、marginやpaddingで悩まない、意図どおりのサイズにするために、下記などを追記する。

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

さらに、フロートがらみのボックスでは、要所で次のようなしかけを

特定のボックス:after { content: ""; display: block; clear: both; }

ボックスの外枠の角を丸める border-radius

iOSのSafariに限定されるわけではないが、見栄えとしてボックスなど四角の角を丸めたいと思うことがある。↓このように…

セレクタ {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

「10px」のところは、お好きなものに変更を。ただし、3箇所とも同じ数値にすること。

iPhoneやiPadで横スクロールバー -webkit-scrollbar

テーブルなどは、スマホ対応で非常に厄介な代表格である。

テーブルがなるべくグダグダにならないように(セルが縦長になりすぎると気持ち悪い)、隠れた右側はスクロールすれば見えるようにするのも案だ。

無理やりの技に近いが、テーブルを次のように囲む。

<div class="scroll-box">
テーブル
</div>

そして、CSSでは次のように

.scroll-box { overflow-x:auto; }
.scroll-box::-webkit-scrollbar { height:8px; }
.scroll-box::-webkit-scrollbar-track { border-radius:8px; background:rgba(238,238,238,1); }
.scroll-box::-webkit-scrollbar-thumb { border-radius:8px; background:rgba(169,170,161,1) ; }

iPhoneで見ると↑このように横スクロールバーが出てくる。

この4つを設定しておけば、iOSのSafari画面が狭いときに最低限のスクロールバーが見えるようになる。
しかも、スクロールバーが不要なものでは表示されない。

例によって、「8px」のところは、お好きなものに。もちろん、3箇所とも同じ数値に。

Safari専用のCSSハック -webkit-min-device-pixel-ratio:0

Windows XPとInternet Explorer 6、その前のNetscape 4などで鍛えられたが

@media screen and (-webkit-min-device-pixel-ratio:0) {
おかしいところをピンポイントで設定
}

Safariや、とくにiOS(iPhone・iPad)だけCSSを効かせる方法である。

-webkit-なんちゃら

というものもあるが、これは、場合によってはChrome(Opera)も巻き込むので、Safariだけのピンポイントのときはメディアクエリのほうを使う。

Google Chrome(OperaなどのBlink)のCSSハック min-resolution: .001dpcm

またChromeも、SafariのWebKitと離縁して、Blinkで別進化しはじめたので、このChrome(OperaなどのBlink)だけCSSを効かせる必要も出てきたようだ。

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
おかしいところをピンポイントで設定
}

結局、IE / ネスケ時代のウェブ作成修行が活きることになる?

Windows 10のEdgeも心配…

なかなか情報が出回らないが、新しいWindowsも登場してかなり経つ。
新しいブラウザーのEdgeも、表示確認の必要があるのだが、そもそもWindows 10を導入する予定もない…

とはいうものの、悩みの種は尽きない。
難儀なことだ。


間違い、勘違いがあれば、どうぞご指摘いただきたい。

スポンサーリンク