ウェブサイト制作でよく使う viewport の設定いろいろ

レスポンシブサイトなどモバイル対応のサイトを制作するときに忘れずに設定しなければいけない viewport です。

viewport は HTML へ meta タグとして記述します。

今回は、よく使うviewport をいくつかメモしておきます。

ピンチイン＆ピンチアウトが使用できる viewport
ピンチイン＆ピンチアウトを不可にする viewport
モバイル対応ではない場合はこの viewport
注意点

ピンチイン＆ピンチアウトが使用できる viewport

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

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

この viewport を記述すると、ウェブサイトがモバイルで閲覧されたときにピンチインとピンチアウトができます。

ピンチイン＆ピンチアウトを不可にする viewport

<meta name= "viewport" content= "width=device-width, initial-scale=1.0 maximum-scale=1.0; user-scalable=0;" >

1	<meta name= "viewport" content= "width=device-width, initial-scale=1.0 maximum-scale=1.0; user-scalable=0;" >

この viewport を記述すると、ウェブサイトがモバイルで閲覧されたときにピンチインとピンチアウトができなくなります。

モバイル対応ではない場合はこの viewport

<meta name="viewport" content="width=任意のサイズpx" />

1	<meta name="viewport" content="width=任意のサイズpx" />

ウェブサイトがモバイル対応ではない場合、俗にいう PC サイトの場合は、応急処置としてモバイルで閲覧したときに PC サイトが型くずれをおこなさにようこの viewport を記述します。ピンチイン＆アウト対応です。

任意のサイズ例：ウェブサイトの幅が 1000px であれば 1060px のように少し元のウェブサイトよりも大きめで入力する。

注意点

これらの viewport を使った場合、Android ブラウザで閲覧した時にフォントサイズが大きくなってしまうバグが起こることがあります。

その場合には、以下のお守り CSS をリセット CSS に記述します。

max-height:999999px;

1	max-height:999999px;

リセットへの使用例：

/*==========================================
 リセット
===========================================*/

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;/** スマートフォンでフォントサイズがおかしくなるのを防止 **/
}

/*==========================================

リセット

===========================================*/

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 を使用するときに注意しなければならない。