iPad 独特の CSS トラブルに javascript で対策してみました。
iPad(MobileSafari) だとこんなことがトラブルんだな、という
珍しい問題を見つけたので
簡単に対策しつつ
レポしたいと思います。
HTML + CSSデザインの話ですので
Web に詳しくない方、以下はおもしろくありません。あしからず。
------------------------------------------------
CSSデザインを行う際、
テキストを箱で囲み、
その背景画像の大きさとテキストをバランスよく配置しつつ
しかしテキストの分量は可変で考えたい場合
こういう手法を取ることがあります。
![映像ディレクターASSASSINのブログもどき-css_usage](https://stat.ameba.jp/user_images/20101118/23/shinasada/1b/2e/p/o0600053410867334907.png?caw=800)
(文字の分量が増減するテキストの背景を指定する方法)
文字列の箱にでかい背景画像を指定するのではなく
箱をあえて二つの div に小分けし
別々の背景画像を充当する方法です。
増減する部分を {background-repeat : repeat-y;} と指定すれば
背景の画像を細い短冊状にしてデータを軽くできますし
ブラウザのバージョンやクライアント(MacとWindowsの)毎に文字の行数などが変わる場合も
デザインを一貫させることが可能になります。
Windows7 の IE9 や Firefox、Mac の Safari で確認する限り、
これはうまくいってます。定石ですし。
が、しかし iPad では
こんな表示になってしまいました。
![$映像ディレクターASSASSINのブログもどき-iPad_tips1_1](https://stat.ameba.jp/user_images/20101118/22/shinasada/90/91/j/o0375050010867221922.jpg?caw=800)
(線が出た!)
なんと div と div の間に黒い線、つまり「隙間」ができてしまったのです。
繰り返しになりますが、
Windowsパソコンや Macの液晶画面では現れていない隙間です。
こりゃいかん。
...ということで
理由をあれこれ考えたのですが
おそらく「iPad 特有のピンチ処理(拡大縮小)に依存しているのでは」
と考え
指でびーっと拡大してみたところ
![$映像ディレクターASSASSINのブログもどき-iPad_tips1_2](https://stat.ameba.jp/user_images/20101118/22/shinasada/92/a2/j/o0375050010867221924.jpg?caw=800)
(ほらね)
隙間が消えた!のです。
おそらく
「iPad が div をレンダリングして配置する際、
画面の拡大率によって
割り算の切り上げ・切り捨ての違いが生まれ、
1ピクセル程度の隙間が
現れたり消えたりする」
ということのようです。
拡大や縮小をすれば微妙にデザインが崩れる
ことは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; /* 1の位を四捨五入 */
alert("h1 = "+ h1 + " / h2 = " + h2);
}
…どういうことかというと、
HTML がクライアント環境にダウンロードされ、
描画処理されて表示された、そのときの
div の縦サイズ(pixel数)を
DOM 操作で取得しようと考えたのです。
「iPad が算出した div の描画サイズの一桁目が
中途半端な数字になっている場合、
割り算が上手くいかないのではないか」という
仮説をたてたわけです。だから四捨五入でもしてやろうかと。
このjs を走らせたところ
まず Windows7 の IE9beta では 縦が 1370px と表示されました。
ところが iPad ではこうなったのです。
![$映像ディレクターASSASSINのブログもどき-iPad_tips1_3](https://stat.ameba.jp/user_images/20101118/22/shinasada/6b/0b/j/o0375050010867221923.jpg?caw=800)
(h1がそのままの数字、h2が四捨五入の数字)
1491ピクセル。なんと中途半端。
そりゃー iPad も困るわな...
ということで、1の位は四捨五入し、
クライアントにダウンロードされた後 div の表示サイズを指定してやると
(具体的にはさっきの関数にこんな一行を加えただけ)
$("#content").css("height", h2);
…こうなりました。
![$映像ディレクターASSASSINのブログもどき-iPad_tips1_4](https://stat.ameba.jp/user_images/20101118/22/shinasada/00/0b/j/o0375050010867221926.jpg?caw=800)
(線が消えた~)
ということで
マニアックな話題ですが
iPad の、というか拡大縮小機能を有するタブレット全般の?
CSSトラブル対策でした。
珍しい問題を見つけたので
簡単に対策しつつ
レポしたいと思います。
HTML + CSSデザインの話ですので
Web に詳しくない方、以下はおもしろくありません。あしからず。
------------------------------------------------
CSSデザインを行う際、
テキストを箱で囲み、
その背景画像の大きさとテキストをバランスよく配置しつつ
しかしテキストの分量は可変で考えたい場合
こういう手法を取ることがあります。
![映像ディレクターASSASSINのブログもどき-css_usage](https://stat.ameba.jp/user_images/20101118/23/shinasada/1b/2e/p/o0600053410867334907.png?caw=800)
(文字の分量が増減するテキストの背景を指定する方法)
文字列の箱にでかい背景画像を指定するのではなく
箱をあえて二つの div に小分けし
別々の背景画像を充当する方法です。
増減する部分を {background-repeat : repeat-y;} と指定すれば
背景の画像を細い短冊状にしてデータを軽くできますし
ブラウザのバージョンやクライアント(MacとWindowsの)毎に文字の行数などが変わる場合も
デザインを一貫させることが可能になります。
Windows7 の IE9 や Firefox、Mac の Safari で確認する限り、
これはうまくいってます。定石ですし。
が、しかし iPad では
こんな表示になってしまいました。
![$映像ディレクターASSASSINのブログもどき-iPad_tips1_1](https://stat.ameba.jp/user_images/20101118/22/shinasada/90/91/j/o0375050010867221922.jpg?caw=800)
(線が出た!)
なんと div と div の間に黒い線、つまり「隙間」ができてしまったのです。
繰り返しになりますが、
Windowsパソコンや Macの液晶画面では現れていない隙間です。
こりゃいかん。
...ということで
理由をあれこれ考えたのですが
おそらく「iPad 特有のピンチ処理(拡大縮小)に依存しているのでは」
と考え
指でびーっと拡大してみたところ
![$映像ディレクターASSASSINのブログもどき-iPad_tips1_2](https://stat.ameba.jp/user_images/20101118/22/shinasada/92/a2/j/o0375050010867221924.jpg?caw=800)
(ほらね)
隙間が消えた!のです。
おそらく
「iPad が div をレンダリングして配置する際、
画面の拡大率によって
割り算の切り上げ・切り捨ての違いが生まれ、
1ピクセル程度の隙間が
現れたり消えたりする」
ということのようです。
拡大や縮小をすれば微妙にデザインが崩れる
ことは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; /* 1の位を四捨五入 */
alert("h1 = "+ h1 + " / h2 = " + h2);
}
…どういうことかというと、
HTML がクライアント環境にダウンロードされ、
描画処理されて表示された、そのときの
div の縦サイズ(pixel数)を
DOM 操作で取得しようと考えたのです。
「iPad が算出した div の描画サイズの一桁目が
中途半端な数字になっている場合、
割り算が上手くいかないのではないか」という
仮説をたてたわけです。だから四捨五入でもしてやろうかと。
このjs を走らせたところ
まず Windows7 の IE9beta では 縦が 1370px と表示されました。
ところが iPad ではこうなったのです。
![$映像ディレクターASSASSINのブログもどき-iPad_tips1_3](https://stat.ameba.jp/user_images/20101118/22/shinasada/6b/0b/j/o0375050010867221923.jpg?caw=800)
(h1がそのままの数字、h2が四捨五入の数字)
1491ピクセル。なんと中途半端。
そりゃー iPad も困るわな...
ということで、1の位は四捨五入し、
クライアントにダウンロードされた後 div の表示サイズを指定してやると
(具体的にはさっきの関数にこんな一行を加えただけ)
$("#content").css("height", h2);
…こうなりました。
![$映像ディレクターASSASSINのブログもどき-iPad_tips1_4](https://stat.ameba.jp/user_images/20101118/22/shinasada/00/0b/j/o0375050010867221926.jpg?caw=800)
(線が消えた~)
ということで
マニアックな話題ですが
iPad の、というか拡大縮小機能を有するタブレット全般の?
CSSトラブル対策でした。