opera:hige

■ [mobile][userjs] Google 検索を Android デフォルトブラウザ と限りなく同じ表示にします 04:08

デフォルトの状態で Google 検索にアクセスすると

のようなスマートフォン向けでない携帯表示になる．もちろん PC と同じ表示にもできるのだがそれでは読みにくい．

まずこのような表示になるのはユーザエージェントが Android として認識されていないためである．

opera:config の User Prefs > Custom User-Agent に

Mozilla/5.0 (Linux; U; Android 2.3.2; ja-jp; SonyEricssonSO-01C Build/3.0.D.2.79) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

を，指定．これは Xperia arc のデフォルトブラウザのユーザエージェントなのだけど，他の機種のものでも多分大丈夫．

これでアクセスすると

おっ，近づいた．でも何かおかしい．

検索入力欄が横に伸びている．これでは入力した後検索ボタンを押すのにスクロールしなくてはならない．

何より醜い．

これをどうにかする．

Opera Dragonfly のリモートデバッグの出番．

body 要素の Computed Style を見てみると width: 850px と出ている．なんぞコレ．

これは viewport メタタグと @viewport 規則 - Dev.Opera によると

ふつうの Web ページを幅 850px の表示領域 (viewport) で描画します。

ということらしい．

さらに

読み込むページが幅 850px よりも大きい場合、たとえば図1で示した www.nytimes.com のようなページの場合、Opera Mobile はひとつ処理を追加します。幅 850px では収まらない部分が出てしまわないように、さらにズームアウトするのです。こうして、画面領域にうまく収まるように縮小が行われます。

ということは縮小されてうまく表示されそうなものなんだけど，Google 検索のソースを見ると

<meta name="viewport" content="minimum-scale=1.0">

これは，ズームを制御する記述で最低のズーム倍率が1倍．つまり縮小できない．これで検索欄がはみ出して表示されるといううわけである．

さてどうするか.

結論を言うと

<meta name="viewport" content="width=device-width">

を追加してやればいい．これは画面幅を端末の表示幅ぴったりにしてくれるという優れもの．

ここで UserJS の登場．CSSで記述する方法もあるみたいだがうまくいかないっぽいので UserJSで．

// ==UserScript==
// @include http://www.google.com/*
// ==/UserScript==

var head = document.getElementsByTagName("head")[0];
var meta = document.createElement("meta");
	meta.setAttribute("name", "viewport");
	meta.setAttribute("content", "width=device-width");
	head.appendChild(meta);

これを適当なディレクトリに hogefuga.user.js としておいて，そのディレクトリを opera:config の User Prefs > User JavaScriptFile に指定．

これで綺麗な Google 検索がわが手に．

Android デフォルトブラウザと同じ表示なったよ！！

これで Opera mobile の嫌いなところがひとつ減ったね！！

検証環境

Sony Ericcson Xperia arc

Android 2.3.2

Opera mobile 11.00 build: ANDR-1105231029

参考

• Opera Dragonfly documentation
• viewport メタタグと @viewport 規則 - Dev.Opera
• Opera Mobileでケータイサイトを見やすくする - いさぢちんメモ