Tweet

viewportは奥深い。というか、スマホもタブレットもOSと機種、画面サイズがそれぞれ違うため、全てを調整しながら作っていくのは難しい。最初の設計段階でよくよく考えておかないと。viewportでいろいろと試行錯誤したのでメモ。

viewportの設定

一般的なスマホサイトをつくろうとすると

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

の設定を使うことが多い。デバイスいっぱいに表示させ、拡大縮小をさせない。

横向きへの対応

しかし、このままだとスマホを横向きにすると文字が余計に拡大されてみづらい。

そこで、以下のCSSをbodyに設定。

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

これがデフォルトではautoになっているため、文字が大きくなるのだが、ここを100%にすると自動調整を解除できる。

横向きへの対応

さらに、Androidではこれだけでは足りないことがある。device-widthでデバイスの幅に合わせてコンテンツを表示する場合、画面に収まりきれず、横スクロールがでてはみでることがある。これを避けるべく、viewportにはtarget-densitydpiという解像度の設定もある。これはAndroidのみ。

デフォルトはmedium-dpiのようだ。

<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi">

のようにして設定できる。

おまけだが、918272のように数字が並ぶと自動的に電話と認識してリンクが貼られるのを防ぐには

<meta name="format-detection" content="telephone=no" />

で解除することが出来る。

Tweet

SPONSOR

PLUS 書店

その他にもこんな記事がおすすめです

スマホサイトのギャラリーに使える「PhotoSwipe」

iPhoneアプリのAd Hoc配信方法まとめ完全版 [Xcode4対応]

Unityを学んでiOS/Androidアプリの3Dゲームを作る！

iPhoneサイトのスクリーンキャプチャをかんたんにとれるアプリ「WebCollector」

Webサービスを成功に導く「アクセスを2倍にする」方法

iOS Developer Enterpriseで社内向けiPhoneアプリを作る方法 [完全版]

iPhoneアプリのUIデザインに役立つサイト

コレを抑えておけばOK！スマホサイト制作に役立つ記事・サイトまとめ！

アプリの説明画面で使える！無料の指ジャスチャー素材！

入力フォームの迷宮。全角数字を強要するフォームを理解できません。

PLUSブログの購読にはRSS・Twitterが便利です

RSSでは記事全文を配信しています。

PLUSメールマガジン

Facebookページでは更新情報や厳選ニュースを配信中

コメント