初期状態で指定の幅にズームさせたスマホサイトが作れないか検討してみた

 

大昔にモバイルサイトの配信を中止して以来、久しぶりに、スマホ向けの軽量ページを試験導入しました。

とりあえずは、PCとスマホにそれぞれ違うページを出せる基盤を作っただけ。って事で、PC版の機能を一部取り除いたものを仮にスマホ版としています。

現時点ではスマホ版・PC版間の遷移機能は設けていないので、 必要なら Android 標準ブラウザや Chrome の「PC版サイトのリクエスト」機能を使ってもらうと、フルページにアクセスできますし、また、サイトのトップはPC・スマホ共通にしていますので、人気記事などの一覧も変わらず見れます。

ちょっとづつ色々変えていく予定ですので、よろしくおねがいします。です。

で、さて、スマホ向けサイトと言えば避けて通れないのが「Viewport」ですが、色々触っているうちに、「スマホの場合はPCサイトの本文部分の幅に最初からズーム表示させておく。なんて事ができるんじゃ?」と思って色々試してみたのでその時のメモを(自分のために)書いておきます。

※この記事は自分用メモなので、今後も更新する可能性があります。

※2013/2/28 Android版Chromeのアップデートでviewport周りが素直になったので、それに合わせて記事を修正

initial-scaleを算出するのに必要なパラメータ

Android 向けの viewport はメタタグにこんな感じで書くわけですが、

<meta name="viewport" content="target-densitydpi=medium-dpi, width=device-width, initial-scale=1, minimum-scale=0.3, maximum-scale=3.0, user-scalable=yes" />

任意の幅に合わせてズームする initial-scale を求めるには、機種ごとの初期表示領域の幅を知る必要があります。

色々試した結果、Android 4.0 版の Chrome ならこんな感じで取れそうじゃん。と。

var scWidth = screen.width; // Yields width of the Viewport. 
var dvPixelRatio = window.devicePixelRatio; 
var innerWidth = scWidth; // Yields default width of the Display area. 
var scaleTo = 540; 
var iniScale = Math.round((innerWidth/scaleTo)*10000)/10000;

※2013年2月末のChromeアップデート以前、および、2013年2月に確認した Android 4.0 標準ブラウザでは innerWidth = scWidth / dvPixelRatio; だったような。

で、こんな感じでMETAタグをセットしてやります。

var meta = document.createElement('meta'); 
meta.setAttribute('content', 'target-densitydpi=medium-dpi, initial-scale=' + iniScale + ', minimum-scale=0.3, maximum-scale=3.0, user-scalable=yes'); 
document.getElementsByTagName('head')[0].appendChild(meta);

※これらは Chrome for Android 向けのコードなので、 UserAgent 毎に調査のして書き分ける必要があるでしょう。Viewport に width は設定した方が都合が良い場合もあったような…。

OS・機種・ブラウザ・状況で異なるViewportの幅と、devicePixelRatio、innerWidth

※2013年2月末のChromeアップデートにより、以下の情報は役に立たなくなりました。screen.width がそのまま Viewport の Width になったと思います。

とりあえず、重要なのは以下の3つ。

  • screen.width
    → Viewportの幅
  • window.devicePixelRatio
  • window.innerWidth
    → 表示領域のサイズ、ただし、レンダリング後はサイズが変わる

この内、問題なのが、innerWidth で、Android では initial-scale = 1 のプレーンな状態の数値がどうも確実には取れないような。

で、調べて見ると、こんな感じで相関関係が見いだせまして、

Viewportの幅/innerWidth/devicePixelRatio

***Chrome for Android***
某Android 4.0 480/320/1.5
某Android 4.1 800/400/2
某Android 4.2 800/600/1.33124

***Safari(iOS 6.1・参考用)***
iPhone 5 320/320/2

じゃあ、initial-scale=1 の時の window.innerWidth …というか初期表示幅は、

Viewportの幅/devicePixelRatio

で求められそうじゃん。という感じ。

とりあえず Chrome for Android 限定で Viewport のメタタグを出力しようかと思ったんですが、先にも書いたとおり、Chrome の UserAgentを騙るブラウザが結構あったり、Android標準ブラウザとChromeですら、このあたりの実装が違う。って事で、混乱を招くだけかなぁ。と思い結局お蔵入りに。がっくり。

コリコリに Javascript で書きまくってやればなんとかなりそうな予感もするんですが、そこまでするのもねー。という事で。

ちなみに Android での Viewport の設定については、公式サイトが非常に良い資料と思います。

その他参考サイト

Hatena Pocket Line

コメントを記入