DN*blog

Firefox3とくらべて若干早い気がする。

Google Chromeは他のブラウザとちょっとGUIが違うので始めて使うときは戸惑うかも・・・。
Windowsのブラウザなら大体がついているんですが、ファイルやブックマークなどのステータスバーがない。
アドレスバーの横にアイコンがあってそれらに収納されています。
ブックマークはその下ですね。

あとは、タブが一番上にあることでしょうか。

Google ChromeのレンダリングエンジンはSafariで用いられる「WebKit」およびMozilla Firefoxのコンポーネントを活用して開発されているのでWebサイトを制作している関係者に関してはさほど問題のないブラウザになりそうです。

また、アドレスバーの部分で検索も行えます。この部分を「Omnibox」と呼ぶみたいです。

さらに、ブラウザに表示されたWebページ上で右クリックをすると、メニューの下に「要素を検証」という項目があります。普通の「ソースを表示」とは別に用意されています。

これがChromeの「要素を検証」画面

ちょっとFirefoxの「Firebug」に似てるかな？って思いました。使い勝手が全然違うっぽいんで微妙ですけどw

もう一つの機能「アプリケーションのショートカットを作成」っていう項目があります。
Webサイトを開いてそれを選択するとデスクトップなどにそのブラウザに即座にアクセス出来るアイコンが作成されます。
iPhoneで言うなら、ホーム画面に追加みたいなものでしょうか。

Gmailなどに「アプリケーションのショートカットを作成」を使えばデスクトップ上のアイコンをWクリックするだけで即座にGmailのメールチェックができるというやり方ができると思います。

Gmailを「アプリケーションのショートカットを作成」すると、以下のようなアイコンが追加される。

と様々な機能を引っさげてやってきた「Google Chrome」
まだWindows版しかリリースされていませんが、近いうちにMac、Linuxとリリースするみたいです。
今後の動向に期待です。

追記です。
インストール先がApplication Dataなのはどうなんでしょうかねｗｗ

前回、文字が拡大されたまま直らないという減少に悩まされていましたが、色々調べた結果解消できました。

-webkit-text-size-adjust: none;

このコードをbodyに追加して解消しました。
意味的には、「文字の拡大縮小機能が無効になる」という命令がかかっています。

例えば、

-webkit-text-size-adjust:200%;

上記のように設定すれば2倍のサイズで表示されます。

あまりみた事ないコードだと思いますが、これはSafari独自プロパティでSafariでのみ適用されるCSSコードです。

iPhoneではSafariでしかブラウザはないのでこういった独自タグも使い放題です。
これらの独自CSSを使えば、JavaScriptのフレームワークなどを別途使わなくても、いろいろと面白いインタラクションが作れそうです。

こういった特殊なタグを使うと面白いサイトが作れそうです。

そして、はまった。

表示、コンタクトフォームからのメール送信。文字化け。
この辺のことは問題なかったんですけど、iPhoneを傾けたときに一部の文字が拡大されるんだけど、傾きを元に戻したときに一部の文字が拡大したまま戻らない。
と言う現象にはまっています・・・。

通常時の表示サイズ

そして、傾けて戻したときの文字サイズ

上記の二枚の画像を比べてもらえるとわかりますが、大きくなってしまいます。
なぜか、左の日付の文字はかわらないんですけど・・・・。

半角だからか？って思ったら他の半角の文字も拡大されたまま戻ってないし。
ますますワカラナイ！！！

ちなみに、metaの設定はコチラ。

<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0" />

表示サイズは320pxに固定。
拡大率は2倍
デフォルトの表示率は1倍
ユーザーが拡大出来る最大値は2倍

こんな感じです。

CSSのfont-familyの設定が悪いのか・・・。
文字サイズの設定が悪いのか。。。

ちょっと色々検証をしないといけないですね。

でも、ブラウザがSafariなんでprototype.jsとか使えて便利ですね。
PHPのメールフォームも問題ないし。

普通のブラウザだし、当たり前か・・・。

viewportの設定に関しては詳しく下記のサイトに掲載されていますのでそちらをご覧下さい。
参考サイト様
ProjectDD Blog - iPhone / iPod touch 向けのmeta要素 viewport