こんにちは。skydです。
Webの開発をしていると、スマートフォン向けのページを作ることは今や避けられません。
僕のようなApple好きはWebでもクールなデザインにしたいものです。そのためにはiPhone5の4インチディスプレイなのか、4Sまでの3.5インチディスプレイなのか見分ける必要があります。
今回はJavascriptを使ってこれを見分ける方法を紹介します。
*僕も初心者なので多くの方には内容が薄いと思います。ご了承ください
まず画面の大きさを取得する方法はいくつもあります。
今回のような場合にはscreen.heightを使うのがいいと思われます。
<!DOCTYPE HTML>
<html>
<head>
<script>
function test(){
alert(screen.height)
}
</script>
</head>
<input type="button" value="テスト" onClick="test()">
<body>
</body>
</html>
このようなコードで試してみます。
まずMacで実行してみました。ボタンを押すと...
このように表示されます。900pxがこの時の画面の高さということです。
iOSで試す前にiPhoneの画面の大きさについて知っておきましょう。
iPhone5,iPodtouch5は横640px,縦1136pxです。
それ以外のRetinaディスプレイのiPhone,iPodtouchは横640px,縦960px
RetinaではないiPhone,iPodtouchは横320px,縦480pxです。
それでは実験です。
まずはiPodtouch5(iPhone5と同じ)
次にiPodtouch4(iPhone4,4Sと同じ)
実はこれらはSafariによって半分にされた値なんですね。
つまり、iPhone5にだけ動作をさせたい場合、
if(screen.height==568){
//動作
}
みたいに書けばいいんですね。skydのメモでした〜
0 件のコメント:
コメントを投稿