opera:hige このページをアンテナに追加

2011-06-09

[][] Google 検索を Android デフォルトブラウザ と限りなく同じ表示にします 04:08  Google 検索を Android デフォルトブラウザ と限りなく同じ表示にします - opera:hige を含むブックマーク はてなブックマーク -  Google 検索を Android デフォルトブラウザ と限りなく同じ表示にします - opera:hige

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


f:id:higeorange:20110609031803p:image


のようなスマートフォン向けでない携帯表示になる.もちろん 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 のデフォルトブラウザのユーザエージェントなのだけど,他の機種のものでも多分大丈夫.

これでアクセスすると

f:id:higeorange:20110609032133p:image

おっ,近づいた.でも何かおかしい.

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

何より醜い.

これをどうにかする.

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

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

これは Dev.Opera ? Not Found によると

ふつうの 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 検索がわが手に.


f:id:higeorange:20110609035308p:image


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

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

検証環境

Sony Ericcson Xperia arc

Android 2.3.2

Opera mobile 11.00 build: ANDR-1105231029

参考

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20110609

2011-02-18

今日の Opera 02:47 今日の Opera - opera:hige を含むブックマーク はてなブックマーク - 今日の Opera - opera:hige

  • Go to speed dial, 11 のように 9 より大きい数を指定できる.
  • アドレスバーに 11 と入力して Enter で Go to speeddial, 11 と同じ.ブックマークのひとつに"11"とニックネームを登録するとスピードダイヤルではなくブックマークが優先される.
  • Open url in new background page, "%t" の %t は展開されない*1

参考

*1:これができれば最高なんだが

トラックバック - http://orera.g.hatena.ne.jp/higeorange/20110218