いさぢちんメモ

2011-04-17

[]Opera Mobileでケータイサイトを見やすくする

Opera MobileはPC向けに作られたウェブサイトを閲覧することに優れたフルブラウザですが、その一方で携帯電話向けに作られた横幅の狭いページを見るのには向いていません。これはOpera Mobileの標準画面幅が850pxに設定されているためで、それ以上のページはズームアウトして表示しますが、それより狭い横幅のページを見ると少々残念なことになってしまいます。

f:id:mosshm:20110417174210j:image

サンプルとして魔法のiらんどのページを利用させていただきました。*1

オプションに「携帯表示」という設定があり、これを有効にすると画面幅に合わせて表示*2されますが、表示が小さいままズームが固定されるので見やすいとは言いがたい表示になってしまいます。

そこで、以下のようなcss適用する。

* {margin:0!important;}
div#Grid {width:240px!important;}
@-o-viewport {
width:240px;
user-zoom:fixed;
}

@viewportで表示領域を240pxに固定して、ユーザによるズームを禁止。

f:id:mosshm:20110417174207j:image

こうすると画面幅が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ライフを。

参考

こちらもどうぞ

*1魔法のiらんど

*2:media=handheldのcssが用意されていればそれを適用する。

edvakfedvakf 2011/04/19 04:40 device-width というのもあるらしいですよ。
<meta name="viewport" content="width=device-width">
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport-ja/

mosshmmosshm 2011/04/20 21:21 device-widthは端末の横幅を採用するのようなので、ケータイサイトだとちょっと広いかなと思い、今回は決め打ちしてみました。

邦訳のほうでちゃんと読んだら、ピクセル数よりdevice-widthがおすすめって書いてありますね。
教えてくださってありがとうございます。

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

Connection: close