読者です 読者をやめる 読者になる 読者になる

初めてのシステムと日記

システムも日記も初めてです。

viewportによるブラウザのウィンドウサイズ指定

iPhone向けにブラウザのウィンドウサイズを指定する方法。


iPhoneの実際の画面サイズは、縦に持った場合320x480px、横に持った場合480x320pxとなります。

そのため、サイトによっては縮小表示されたりなどで、文字が読みづらいなどということが起きたりします。


これの対応として、iPhone用のSafariにはviewportというmetatagがあります。

これを設置しプロパティを設定することで、初回アクセス時にも最適なウィンドウサイズになります。

  • viewportの設定
<html>
<head>
<meta name="viewport" content="[property]=[value]">
 ・
 ・
</head>
<body>
 ・
 ・
 ・
</body>
</html>
  • プロパティと値
プロパティ デフォルト その他
width viewportの横幅 980px device-widthの指定が可能
height viewportの縦幅 横幅から計算 device-heightの指定が可能
initial-scale 倍率の初期値 表示範囲から計算される値
minimum-scale 倍率の最小値 0.25
maximum-scale 倍率の最大値 1.6

※device-width:iPhone横持ちの場合でも必ず320px
※device-height:Phone縦持ちの場合でも必ず480px