HeavyBommer@blog
時事ネタ、コンピュータ、家電、プログラミング等々、思ったこと/考えたこと/提案/使用レポ/Tipsなどを思いついたときに書いてゆきます
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スマフォ用ページ作成Tips
半分備忘録ですが。

・スマフォの画面サイズ
普通にページを表示させると、スマフォの場合は横方向を仮想的に900px位になるようにしているらしく、取っても小さく表示されてしまいます。
デザイン優先で、PCとスマフォを共通に扱うなら良いのですが、そうでない場合はバカみたいにフォントサイズを大きくしないと現実的な大きさにならないという欠点ができてしまいます。
そして、そういった形で解決を図ると、PCでアクセスした場合に馬鹿でかいフォントで表示されます。

というわけで、解決策ですが、metaタグでviewportを設定すると良いようです。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

みたいな感じですね。

width=device-widthでブラウザの幅(仮想)を実際のデバイスの幅に合わせます。
initial-scaleは初期倍率ですね。

ただ、iPhoneだとどうかわかりませんが、Android(標準ブラウザ)だとWVGA(幅480px)の端末でも、幅が320pxになってしまうみたいです。
なんでかわかりませんが、これについては解決策が見いだせていません。

ご存じの方がおられたら教えてほしいのですけどね。

解決法がわかりました。
target-densitydpi=device-dpiを追加すれば良いようです。(Android2.x以降)
これは前にも試していたのですが、順番がものをいうようで、widthより前に指定しないとダメなようです。
<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=1.0" />
とすれば、端末の実寸で表示されるようですね。

まあ、今後スマフォの画面解像度が(物理サイズは現状のままで)SVGAとかXGAとかになってくると、逆に実寸表示にしないほうがいいのかもしれませんけどね。

・画像自動拡大
これはJavaScriptを使って、ブラウザの幅に合わせて自動的に画像を拡大するというものです。
以下のような感じですね。

<img src="1key.png" id="NumImg1" onload="resize(1);" />
<img src="2key.png" id="NumImg2" onload="resize(2);" />
<img src="3key.png" id="NumImg3" onload="resize(3);" />
<br />
 ・
 ・
 ・
<script type="text/javascript">
<!--
var scrW = getBrowserWidth();
var scrH = getBrowserHeight() - 150;

function getBrowserWidth()
{
if(window.innerWidth)
{
return window.innerWidth;
}
else if(document.documentElement && document.documentElement.clientWidth != 0)
{
return document.documentElement.clientWidth;
}
else if(document.body)
{
return document.body.clientWidth;
}
return 0;
}

function getBrowserHeight()
{
if(window.innerHeight)
{
return window.innerHeight;
}
else if(document.documentElement && document.documentElement.clientHeight != 0)
{
return document.documentElement.clientHeight;
}
else if(document.body)
{
return document.body.clientHeight;
}
return 0;
}

function resize(num)
{
img = document.getElementById("NumImg" + num);
imgW = img.width;
imgH = img.height;
scaleW = (scrW / (imgW * 3)) | 0;
scaleH = (scrH / (imgH * 4)) | 0;
scale = (scaleW < scaleH) ? scaleW : scaleH;
if(scale > 1)
{
img.width=(imgW * scale).toFixed(0);
img.height=(imgH * scale).toFixed(0);
}
}
//-->
</script>

ちなみに、getBrowserWidth/getBrowserHeightはこちらのものを使わせてもらっています。
スポンサーサイト

テーマ:webサイト作成 - ジャンル:コンピュータ

コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。