あかつきのお宿

僕のandroidケータイはバージョンが2.3なんですけど、どうにもこう、あっちを立てればこっちが立たずな感じでして……はい。

でもまあ結局のところは、ポンコツだったのはケータイよりも僕のHTMLやCSSに関する知識の方だったかにゃっていうお話です。

user-scalableをnoにしているときの問題

僕が仕事で運用しているウェブサービスの話なんですけど、androidケータイだけ、プルダウンが選択できないって問題が発生してたんですよ。

当たり判定がそんなに厳しいのかと思って、もう、指の先でこれ以上ないくらい正確にプルダウンの中心とかグリグリ押してみるんですけど、全然反応しないのね。「てめーはEDかよ！」ってくらいに反応しない。怒りのあまりうっかり放送禁止用語が出ちゃうくらい。

正直、どうしてプルダウンが押せないのかよく分からなかったんで、最終的に出した結論が「ま、ウチのサービスはandroidユーザーほとんどいないし、きっと俺のケータイのバージョンが古いせいで出ちゃうバグなんだろう。バージョン4.0とか使ってる人なら大丈夫だ」って感じで、とりあえず現実から逃げてました。



あと、あれ。何て言えばいいんだろう……テキストボックスにフォーカスを当てたときに、フォーカスが何かずれるのね。キャプチャ画像を見せられれば早いんだけど……androidケータイでキャプチャってどうやって撮るんだ？

ラジオボタンを押したときとかも、押せることは押せるんだけど、やっぱりフォーカスがずれてる。これがブラジャーのヒモだったらありがたく拝ませてもらうところですが、ウェブサイトとなるとね、目の保養にはならない。気持ち悪いだけ。ブラのヒモも、ずれてる側の人からすれば変な位置にヒモが当たって気持ち悪いのかもしれませんが。

でもまあ、見た目がちょっと気持ち悪いだけで（ブラの方じゃないよ？）テキストが入力できないとかそういうことはないし、やっぱりどうやると直るのかがよく分からなかったので、最終的に出した結論が「ま、ウチのサービスはandroidユーザーほとんどい(ry」って感じで、やっぱり現実から逃げてました。



でもやっと分かった。

『user-scalable』が問題だった。

スマホの場合、指二本とかで画面の拡大や縮小ができますけど、それを許可するかしないか、user-scalableってやつで設定できるんですね。

//拡大・縮小を許可する（1じゃなくてyesでも可）
<meta name="viewport" content="user-scalable=1">

//拡大・縮小を許可しない（0じゃなくてnoでも可）
<meta name="viewport" content="user-scalable=0">

user-scalableをnoにすると、指でぐいっと画面を広げようと思っても、広げることができない。

僕が運用しているサイトもずっとこの設定にしていたんですが、どうやらこいつが原因だったようです。

先日「iPhoneで画面が拡大できないんだけどどーにかしろやこら。てめーんとこのサービス使うの止めんぞ」っていうクレームが来たので、このuser-scalableをyesにしたんですよ。そしたらいつの間にかプルダウンが普通に選択できるようになり、フォーカスのずれも直ってた。

何でuser-scalableをnoにするとその辺のバグ（バグなのか？）が発生するのかは分かりませんが、もし同じような症状に悩まされている人がいたら、viewportでuser-scalableをnoにしていることが原因の可能性があるから、いじってみると良いよ。

user-scalableをyesにしているときの問題

さて、じゃあyesにすれば万事解決かというと、もちろんそんなことはない。それだったらあちらを立てたらこっちも立ったことになりますからね。EDも解消ですよ。おっと、うっかり放送禁止ry

user-scalableをyesにしていると、今度はCSSの『position:fixed』が効かなくなる。

噂によるとバージョン4だと大丈夫らしいんだけど、僕の2.3だと、fixedしているところのデザインが崩れたりしてた。

まあ、これについては、iScrollを使うとか、いろいろ解決法があるみたいなんですけど、思いきってposition:fixedを使わないように頑張るってのも、一つの手かもしれないですね。






しかしほんと、マルチデバイス対応ってめんどいよね……。

いや、デザイン次第なんですけどね。あっちもこっちもそっちもどっちも立つような、ビンビンなデザインにできれば、問題は解決なんですけどね。