iOS(iPhone・iPad)のCSSハック

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

  • Safariの明朝をゴシックに
  • iPhoneなどで縦横画面でフォントサイズが変わる
  • リンク長押しのポップアップ
  • iPhoneなどのフォーム
  • iPad横で画面が動いたり、切れたり
  • Safariの等幅フォント
  • フラットデザインはボックス box-sizingで意図したサイズ
  • Safari専用CSSハック
  • Chrome(Blink)専用CSSハック

Safari(Macを含む)は明朝(serif)がデフォルト ゴシック(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)はデバイスの縦横でフォントサイズが変わる

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

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

タップターゲットの長押しポップアップを阻止

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

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

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

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

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

サイト丸ごとなら

* { -webkit-appearance: none; }

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

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

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

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

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

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

iPad横で画面が切れる

じつはこのサイトも、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」で表示されるらしい。

フラットデザインのボックスは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; }

Safari専用のCSSハック

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ハック

また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も、表示確認の必要があるので、悩みの種も増えてしまう。

難儀なことだ。


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

«
»