iPadでrep2
iPhoneのUAは、
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; ja-jp) ~
という感じなんですが、iPadのUAは、
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; ja-jp) ~
となっているのですね。
それなので、「iPhone」という文字列でPC/iPhone判定している場合には、iPadはPCサイトに飛ばされることになる。
rep2を愛用しているのですが、iPadでPC用表示になるとちょっと困ったことに。。
iPadのSafariでは画面右端にスクロールバーが存在しない。
これはページ全体のスクロールバーだけでなく、frameやiframe、overflowなdiv要素などなど、とにかくスクロールバーというものが全く無いのです。
まぁこれはタッチスクロールだからこれで良いとは思うのですが、問題はframeやiframeではフレーム内のコンテンツを全て表示するように、フレームの幅や高さを強制的に広げてくれちゃうのです。強制的にスクロールバーが発生しない状態にしてくれているということなのか。。。
ちなみに、overflowなdiv要素の場合にはdiv要素のサイズは変わりません。
しかし、指1本のタッチスクロールではページ全体のスクロールになってしまうため、div要素内のスクロールができません。これは指2本ジェスチャーでスクロールできます。
まぁ、そんなわけでフレームを使用しているrep2のPC用表示は、iPadで表示するとえらいことになってしまうわけですよ。
とりあえずはiPhone用の表示を使うのが良いかと。
/lib/UA.phpの
if (preg_match('/(iPhone|iPod)/', $ua) || UA::isAndroidWebKit($ua)) {
$isiPhoneGroup = true;
}
↑これを↓このように修正。
if (preg_match('/(iPhone|iPod|iPad)/', $ua) || UA::isAndroidWebKit($ua)) {
$isiPhoneGroup = true;
}
それとこれはiuiの問題かもですが、iPadではiPhoneデザインの表示でタップの際のハイライトが効きません。なのでこの部分を通常リンクのハイライトに変えました。
/iui/iui.cssの
/*
一覧のリンク設定
paddingをいじれば余白の調整可能
*/
body > ul > li > a {
display: block;
margin: -8px 0 -8px -10px;
padding: 8px 38px 8px 30px;
text-decoration: none;
color: inherit;
background: url(listArrow.png) no-repeat right center;
}
/* iphone 080808*/
body > ul#home > li > a {
padding: 8px 32px 8px 10px;
}
↑これを↓このように修正。
/*
一覧のリンク設定
paddingをいじれば余白の調整可能
*/
body > ul > li > a {
display: block;
/*margin: -8px 0 -8px -10px;*/
/*padding: 8px 38px 8px 30px;*/
padding: 0px 38px 0px 20px;
text-decoration: none;
color: inherit;
background: url(listArrow.png) no-repeat right center;
}
/* iphone 080808*/
body > ul#home > li > a {
/*padding: 8px 32px 8px 10px;*/
padding: 0px 32px 0px 0px;
}
これでとりあえずiPadでも快適にrep2を利用できるようになりました。
でも、やっぱりこの画面の大きさを活かした別レイアウトがあったほうがいいですね。
ってことでiPad正式対応を激しく希望。