LABO IWASAKI

iphoneなどiosでCSSが崩れる時の対処法

ios CSS

こういうの本当にやめて欲しいよね。
iphoneだと勝手に文字がデカくなったりとかさ。
ボタンが勝手に立体になったりとか…。

iosとAndroidでCSS変えるとか…。
マジでその辺統一してくれませんか?
…え?…バカなの?面倒なんだよ。

ボタンの怪

Button

iphoneなどiosだと、ボタンは勝手にグラデーションされ、影が付きます。
このアホとしか思えない仕様は以下のように回避できます。

.button {
  background-color:#cea17e; 
  background:-webkit-gradient(linear, left top, left bottom, from(#cea17e), to(#cea17e));
   }
.button {
  -webkit-appearance:none;
   }

一件落着です。
これでマトモにフラットデザインにできますね。

文字がデカくなる

Text

iphoneを横持ちにしたらサイトの文字がデカくなった事ありませんか?
あのアホな仕様をクリアします。

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

一件落着です。
これでどのブラウザで見ても文字は同じ大きさです。

スクロール

Scroll

iphoneだけ何故かスクロールが重い、というかぎこちない…。
Androidや他のブラウザではスムーズなのに…。
そんな時はスクロールしてる要素にこれを書いてみてください。


-webkit-overflow-scrolling:touch;

たったこれだけです。
こんなもんデフォルトで有効にしとけよ。

セレクトボックス

Select Box

FormのSelectを装飾したいけど何故かiosだけCSSが反映されない…。
そんな時は以下を追加するとSelectのCSSが反映されます。


select {
 -webkit-appearance: button; appearance: button;
 }

これもデフォルトにしとけよ。
ios本当嫌い。

番外編

Fixed

おまけです。
position:fixedを指定したのにCSS効かない…。
もしかしたら以下を要素に追加するといけるかもしれません。


.box {
 -webkit-transform: translateZ(0);
 }

状況によるので「絶対直る」とは言いません。