レスポンシブサイトなどモバイル対応のサイトを制作するときに忘れずに設定しなければいけない viewport です。
viewport は HTML へ meta タグとして記述します。
今回は、よく使うviewport をいくつかメモしておきます。
ピンチイン&ピンチアウトが使用できる viewport
1 |
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> |
ピンチイン&ピンチアウトを不可にする viewport
1 |
<meta name= "viewport" content= "width=device-width, initial-scale=1.0 maximum-scale=1.0; user-scalable=0;" > |
モバイル対応ではない場合はこの viewport
1 |
<meta name="viewport" content="width=任意のサイズpx" /> |
任意のサイズ例:ウェブサイトの幅が 1000px であれば 1060px のように少し元のウェブサイトよりも大きめで入力する。
注意点
これらの viewport を使った場合、Android ブラウザで閲覧した時にフォントサイズが大きくなってしまうバグが起こることがあります。
その場合には、以下のお守り CSS をリセット CSS に記述します。
1 |
max-height:999999px; |
リセットへの使用例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/*========================================== リセット ===========================================*/ html { overflow-y:scroll; } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; max-height:999999px;/** スマートフォンでフォントサイズがおかしくなるのを防止 **/ } |
リセットに記述した場合は他で max-height を使用するときに注意しなければならない。