iPhone の mobile safari では、
overflow : scroll ;
が使えるんだね。
これまでに何度か試して、使えないと思ってた。
まさか二本指でドラッグとは。
判ってみれば納得の操作なのだが、迂闊にも気づかなかったよ。
こういう見落としって、他にもたくさんあるんだろうな。
これに気付いたからって訳でもないのだが、この文章群を iPhone で見やすいようにいろいろ弄ってみた。
最初は、スタイルシートを iPhone とその他とで切り替えるように
<link rel="stylesheet" type="text/css" href="iPhone.css" media="only screen and (max-width:480px)" />
<link rel="stylesheet" type="text/css" href="others.css" media="screen and (min-width:481px)" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ieOnly.css" media="all" />
<[endif]-->
なんてやってみたのだが、同じPC用のブラウザなのに IE とその他とを別扱いしなきゃいけないのが、すっきりしなくて嫌。
そこを同じにするために、
if ( navigator.userAgent.match( /iPhone/i ) ) {
document.write( '<link rel="stylesheet" type="text/css" href="iPhone.css" />' ) ;
} else {
document.write( '<link rel="stylesheet" type="text/css" href="others.css" />' ) ;
}
と、JavaScript で iPhone かどうかを判定して css の指定を書き換えるようにしてみたが、これはこれですっきりしない。
iPhone 用にする場合、他にも viewport の設定をHTMLに書くことになるので、もっと割り切って、HTML出力用のテンプレートを分けることにした。 これで、head の中は一気にすっきりしたが、逆に同じ body がテンプレートそれぞれにできてしまう。 が、考えてみれば、iPhone とそうじゃないデバイスとでタグの構成を変えたくなるような事態になりそうだし、これが正解な気がしてきた。
で、実際に iPhone に表示させてみたのだが。
<meta name="viewport" content="user-scalable=no, width=device-width">
という viewport の指定は、テキストだけなら問題ないけど、画像が入ると駄目なんだね。 いや、画像に限らず pre なんかもそう。 とにかく、画面の基本幅である 320px を越える幅の要素があった場合、その幅が収まるように全体が縮小されて表示される。
viewport の設定をまるっきり無視してくれるならまだいい。 実際は、テキスト等のフローレイアウト（？）風の要素に対しては、表示幅を viewport の指定に合わせて配置し、その後に画像や pre の幅に合わせて縮小される。
その辺りの調整が巧くできないものかと色々やって見たのだが、だんだん面倒になって、最終的には JavaScript で、読み込み完了のイベントで画像を全て標準サイズの画面に収まるように縮小することにした。
window.addEventListener( 'load', function () {
Array.prototype.each.call( document.getElementsByTagName( 'img' ), function ( img ) {
if ( img.width > window.innerWidth ) {
img.height = Math.floor( img.height * window.innerWidth / img.width );
img.width = window.innerWidth;
}
if ( img.height > window.innerHeight ) {
img.width = Math.floor( img.width * window.innerHeight / img.height );
img.height = window.innerHeight;
}
} );
}, false );
こんな感じで。 each は 昔作った配列のメソッド で、各要素に関数を適用するもの。
で、結局のところ、面倒で半ば投げ出した形の対策が、もっともしっくりくるという結末なのだった。 ま、そんな試行錯誤が楽しいんだけど。 今日はここまで。