Sat, May 27, 2017

スマートフォン(iphone、Xperia、GALAXY等)のviewportの最適な指定方法とは? – 画面サイズ(画面解像度)の一覧も

iphone、Xperia、GALAXY等、スマートフォンの主要機種それぞれを考慮したviewportの指定方法です。
640px960pxを基準とし、画面サイズ320pxに合わせるように指定するのがよいかと思います。

記述はこんな感じです。

<meta name="viewport" content="width=device-width, initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes">
■パラメータの説明
パラメータ 内容 デフォルト
width 可視領域の横幅 980px 200pxから10000pxまでの範囲を指定
又は
device-width
(デバイスの横幅に合わせる場合)
height 可視領域の高さ 自動 233pxから10000pxまでの範囲を指定
又は
device-height
(デバイスの縦幅に合わせる場合)
initial-scale 初期拡大率 1 minimum-scaleからmaximum-scaleによって定義された範囲の値を指定
minimum-scale 拡大率の最小scale値 0.25 0 から10.0までの範囲を指定
maximum-scale 拡大率の最大scale値 1.6 0から10.0 までの範囲を指定
user-scalable ズーム操作を許可するかどうか yes yesかnoで指定
■主要機種の画面サイズ(解像度)
iPhone3G / 3GS 320×480
iPhone4 640×960
iPad / iPad 2 768×1024
HT-03A 320×480
Xperia (SO-01B) / Xperia arc (SO-01C) 480×854
HTC Desire (X06HT) 480×800
Nexus One 480×800
Galaxy S 480×800
IS03 640×960
Galaxy Tab 600×1024

 

参考サイト:スマートフォン(iPhone/Android)アプリ制作時に役立つ画像サイズのまとめ : アシアルブログ

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree