iPad 独特の CSS トラブルに javascript で対策してみました。
iPad(MobileSafari) だとこんなことがトラブルんだな、という
珍しい問題を見つけたので
簡単に対策しつつ
レポしたいと思います。
HTML + CSSデザインの話ですので
Web に詳しくない方、以下はおもしろくありません。あしからず。
------------------------------------------------
CSSデザインを行う際、
テキストを箱で囲み、
その背景画像の大きさとテキストをバランスよく配置しつつ
しかしテキストの分量は可変で考えたい場合
こういう手法を取ることがあります。
（文字の分量が増減するテキストの背景を指定する方法）
文字列の箱にでかい背景画像を指定するのではなく
箱をあえて二つの div に小分けし
別々の背景画像を充当する方法です。
増減する部分を {background-repeat : repeat-y;} と指定すれば
背景の画像を細い短冊状にしてデータを軽くできますし
ブラウザのバージョンやクライアント（MacとWindowsの）毎に文字の行数などが変わる場合も
デザインを一貫させることが可能になります。
Windows7 の IE9 や Firefox、Mac の Safari で確認する限り、
これはうまくいってます。定石ですし。
が、しかし iPad では
こんな表示になってしまいました。
（線が出た！）
なんと div と div の間に黒い線、つまり「隙間」ができてしまったのです。
繰り返しになりますが、
Windowsパソコンや Macの液晶画面では現れていない隙間です。
こりゃいかん。
...ということで
理由をあれこれ考えたのですが
おそらく「iPad 特有のピンチ処理（拡大縮小）に依存しているのでは」
と考え
指でびーっと拡大してみたところ
（ほらね）
隙間が消えた！のです。
おそらく
「iPad が div をレンダリングして配置する際、
画面の拡大率によって
割り算の切り上げ・切り捨ての違いが生まれ、
１ピクセル程度の隙間が
現れたり消えたりする」
ということのようです。
拡大や縮小をすれば微妙にデザインが崩れる
ことはiPad(MobileSafari) の仕様といえなくもないので
あきらめようかという気にもなりますが
どうしても僕が気になったのは
「拡大縮小をする前、つまり
iPad でこのWebサイトにアクセスして
一発目の表示なのに隙間が生まれている」
ということ。
こんなデザインにしたんだ、と思われるのはなんか気持ちわるいです。
そこで、対策するため javascript で 次のようなコードを書きました。
function show_divheight(){
var h1;
var h2;
var targetDiv;
targetDiv = document.getElementById("content");
h1 = targetDiv.clientHeight; /* div の描画時の縦幅ピクセルを取得 */
h2 = Math.round(h1/10) * 10; /* １の位を四捨五入 */
alert("h1 = "+ h1 + " / h2 = " + h2);
}
…どういうことかというと、
HTML がクライアント環境にダウンロードされ、
描画処理されて表示された、そのときの
div の縦サイズ(pixel数）を
DOM 操作で取得しようと考えたのです。
「iPad が算出した div の描画サイズの一桁目が
中途半端な数字になっている場合、
割り算が上手くいかないのではないか」という
仮説をたてたわけです。だから四捨五入でもしてやろうかと。
このjs を走らせたところ
まず Windows7 の IE9beta では 縦が 1370px と表示されました。
ところが iPad ではこうなったのです。
（h1がそのままの数字、h2が四捨五入の数字）
１４９１ピクセル。なんと中途半端。
そりゃー iPad も困るわな...
ということで、１の位は四捨五入し、
クライアントにダウンロードされた後 div の表示サイズを指定してやると
（具体的にはさっきの関数にこんな一行を加えただけ）
$("#content").css("height", h2);
…こうなりました。
（線が消えた～）
ということで
マニアックな話題ですが
iPad の、というか拡大縮小機能を有するタブレット全般の？
CSSトラブル対策でした。
珍しい問題を見つけたので
簡単に対策しつつ
レポしたいと思います。
HTML + CSSデザインの話ですので
Web に詳しくない方、以下はおもしろくありません。あしからず。
------------------------------------------------
CSSデザインを行う際、
テキストを箱で囲み、
その背景画像の大きさとテキストをバランスよく配置しつつ
しかしテキストの分量は可変で考えたい場合
こういう手法を取ることがあります。
（文字の分量が増減するテキストの背景を指定する方法）
文字列の箱にでかい背景画像を指定するのではなく
箱をあえて二つの div に小分けし
別々の背景画像を充当する方法です。
増減する部分を {background-repeat : repeat-y;} と指定すれば
背景の画像を細い短冊状にしてデータを軽くできますし
ブラウザのバージョンやクライアント（MacとWindowsの）毎に文字の行数などが変わる場合も
デザインを一貫させることが可能になります。
Windows7 の IE9 や Firefox、Mac の Safari で確認する限り、
これはうまくいってます。定石ですし。
が、しかし iPad では
こんな表示になってしまいました。
（線が出た！）
なんと div と div の間に黒い線、つまり「隙間」ができてしまったのです。
繰り返しになりますが、
Windowsパソコンや Macの液晶画面では現れていない隙間です。
こりゃいかん。
...ということで
理由をあれこれ考えたのですが
おそらく「iPad 特有のピンチ処理（拡大縮小）に依存しているのでは」
と考え
指でびーっと拡大してみたところ
（ほらね）
隙間が消えた！のです。
おそらく
「iPad が div をレンダリングして配置する際、
画面の拡大率によって
割り算の切り上げ・切り捨ての違いが生まれ、
１ピクセル程度の隙間が
現れたり消えたりする」
ということのようです。
拡大や縮小をすれば微妙にデザインが崩れる
ことはiPad(MobileSafari) の仕様といえなくもないので
あきらめようかという気にもなりますが
どうしても僕が気になったのは
「拡大縮小をする前、つまり
iPad でこのWebサイトにアクセスして
一発目の表示なのに隙間が生まれている」
ということ。
こんなデザインにしたんだ、と思われるのはなんか気持ちわるいです。
そこで、対策するため javascript で 次のようなコードを書きました。
function show_divheight(){
var h1;
var h2;
var targetDiv;
targetDiv = document.getElementById("content");
h1 = targetDiv.clientHeight; /* div の描画時の縦幅ピクセルを取得 */
h2 = Math.round(h1/10) * 10; /* １の位を四捨五入 */
alert("h1 = "+ h1 + " / h2 = " + h2);
}
…どういうことかというと、
HTML がクライアント環境にダウンロードされ、
描画処理されて表示された、そのときの
div の縦サイズ(pixel数）を
DOM 操作で取得しようと考えたのです。
「iPad が算出した div の描画サイズの一桁目が
中途半端な数字になっている場合、
割り算が上手くいかないのではないか」という
仮説をたてたわけです。だから四捨五入でもしてやろうかと。
このjs を走らせたところ
まず Windows7 の IE9beta では 縦が 1370px と表示されました。
ところが iPad ではこうなったのです。
（h1がそのままの数字、h2が四捨五入の数字）
１４９１ピクセル。なんと中途半端。
そりゃー iPad も困るわな...
ということで、１の位は四捨五入し、
クライアントにダウンロードされた後 div の表示サイズを指定してやると
（具体的にはさっきの関数にこんな一行を加えただけ）
$("#content").css("height", h2);
…こうなりました。
（線が消えた～）
ということで
マニアックな話題ですが
iPad の、というか拡大縮小機能を有するタブレット全般の？
CSSトラブル対策でした。