Visualforceページをスマートフォンから見るとデバイスの幅に合わせてフォントサイズなどが縮小されて表示されます。今までCSSで無理やり大きくするしかないと思っていたのですが、メタタグを一つ追加するだけで縮小されずに表示できるということを教えてもらったので試してみました。
PCでみたときは通常のスタイルで表示され、モバイルでみたときも見やすいサイズで表示することができたのですごく便利そうです。
この方法だとデバイスから拡大・縮小の操作ができないみたいなので表示幅が固定のときに使用するといいのかなと思いました。
このメタタグの詳しい使い方は、スマートフォン向けサイト開発について説明してくれているサイトで詳しく記載されていました。ちゃんと調べてはいませんが要素の指定内容によっていろいろできるみたいです。
Salesforce Touch Platform モバイルガイドにも、このメタタグを使ったサンプルソースが掲載されていました。
Salesforce Touch Platform
http://wiki.developerforce.com/page/JP:Salesforce_touch_platform
Salesforce Touch Platform モバイルガイドにどのデバイスからアクセスされているか判定するための処理についての説明も載っていました。サンプルソースについてはGitHubにアップされているみたいです。
sbhanot-sfdc / Visualforce-Device.js
https://github.com/sbhanot-sfdc/Visualforce-Device.js
このサンプルソースの中身は次のとおりです。
- device.js
- DeviceJSTemplate.page
- DesktopVersion.page
- PhoneVersion.page
- TabletVersion.page
device.jsは静的リソースにアップして使用します。
アップするときの名前は「Device_js」にする必要があります。
DeviceJSTemplate.pageにアクセスすると対象デバイスによってそれぞれのページに遷移する動作となっていました。
試しにPCからアクセスした場合はDesktopVersion.pageが表示されました。
スマートフォンからアクセスした場合はPhoneVersion.pageが表示されました。
サンプルソースはshowHeader="false" standardStylesheets="false"で宣言されていたので、"true"に変更してみたのですが、正常に動作しなくなりました。この判定処理を実行するためには"false"である必要があるみたいです。そのため標準のヘッダーを使用しない画面での使用が前提みたいです。
今回の検証はAndroid端末で行なっています。Tablet端末は持っていないので検証できませんでした。スマートフォンから操作するのは中々大変だったのでやっぱりTablet端末が欲しいな。
Mobile SDKの環境構築がまだうまくいっていないので、こういう方法で実装するやり方を覚えておくのもいいかなと思いました。
