Opera Mobileでケータイサイトを見やすくする
Opera MobileはPC向けに作られたウェブサイトを閲覧することに優れたフルブラウザですが、その一方で携帯電話向けに作られた横幅の狭いページを見るのには向いていません。これはOpera Mobileの標準画面幅が850pxに設定されているためで、それ以上のページはズームアウトして表示しますが、それより狭い横幅のページを見ると少々残念なことになってしまいます。
サンプルとして魔法のiらんどのページを利用させていただきました。*1
オプションに「携帯表示」という設定があり、これを有効にすると画面幅に合わせて表示*2されますが、表示が小さいままズームが固定されるので見やすいとは言いがたい表示になってしまいます。
そこで、以下のようなcssを適用する。
* {margin:0!important;}
div#Grid {width:240px!important;}
@-o-viewport {
width:240px;
user-zoom:fixed;
}@viewportで表示領域を240pxに固定して、ユーザによるズームを禁止。
こうすると画面幅が240pxに固定され、携帯電話のブラウザで閲覧するような表示となり見やすくなりますが、これをいざusercssとして利用すると、どうも@-o-viewportが適用されないようなのです。
なのでmeta要素のviewportを使うことにしました。以前、別のケータイサイトを見やすくするためにuserjsを書いたのですが、横幅の指定などが汎用的でないし、適用するのにいちいちuserjsを書き換える必要があるので、今回はブックマークレットを使用することにします。
javascript:var element = document.createElement('meta');element.name = "viewport";element.content = "width=240px; user-scalable=no;";var addHead = document.getElementsByTagName("head").item(0);addHead.appendChild(element);undefined;これも上記cssの例と同じく、widthを240pxに指定しユーザによるズームを禁止しています。閲覧するページの横幅に合わせて該当箇所を書き換えるといいかもしれません。あと、いい加減に書いたのでもっと良い方法があったら誰か頼む。
……よく考えたらページ遷移が多い携帯サイトだったらuserjsのほうがいいですね。
それではよいOpera Mobileライフを。
