share facebook facebook twitter menu hatena pocket slack

2011.11.11 FRI

スマートフォンサイトのコンテンツサイズについて

櫛田 草平

WRITTEN BY 櫛田 草平

こんにちは。
職人見習いの櫛田です。

スマートフォンサイトをコーディングする際にまず悩むのが、コンテンツのサイズを何pxにするかとうこととiPhoneでもAndroidでも画面サイズに合った表示をしなくてはならず、Androidでは機種によっても変わってくるということです。

今回、コンテンツの幅は640pxで作成しております。

metaタグのviewportに下記のような設定をしてみたのですが、うまくいきませんでした。
この設定にさらに様々な指定を加えて調整してみたのですが、iPhoneでうまくいってもAndroidではうまく表示されなかったり、横向きの場合、画面サイズに合わなかったりとなかなかうまくいきませんでした。

そこで、下記のようにjavascriptでコンテンツサイズを制御するようにしました。

参考サイト:スマートフォンのサイトを横に回転させた時に画面のサイズに合わせて拡大させるには

これにより、iPhoneでもAndroidでも画面サイズに合った表示ができるようになりました。
横向きにした場合にも、幅が調整されて表示されており、iPadでも画面サイズに合わせて表示されました。

※この記事は、なかの人(KUSSY8077)が書いています。

櫛田 草平

櫛田 草平

cloudpackで運用、保守、構築、夜間対応を担当しており、日々様々な課題に対応していますのでこの経験を記事にしていけたらと思います。 櫛田 草平

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。