【勉強メモ】スマホ用サイト1〜htmlコード解説 〜

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スマートフォン専用サイト</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
content="width=device-width
幅をデバイスに合わせる旨の記述。

initial-scale=1.0
iphone用記述。横にした時ズームになってしまうので、1.0の初期値を入れて横にしてもズームされないようにしている。
ワードプレステキストp.248にわかりやすい説明あり。
わりと使われる。

user-scalable=no
指で拡大・縮小をさせるか。yesかnoの記述(1か0の場合もあり)。
作りによってyesにもnoにもなる。ワンカラムレイアウトならno。

<meta name="format-detection" content="telephone=no, email=no">
telephone=no
スマホ用サイトだと番号の羅列の記述が電話番号と認識されてしまう。
認識されると、番号をタッチ→電話がかかってしまう。それを防ぐための記述。

email=no
telephone=noと同じ内容。

<link rel="apple-touch-icon" href="apple-touch-icon.png">
apple-touch-iconはico形式ではなくpngでOK。
ファイルの置き場所はimgの中ではないので注意。
<link rel="stylesheet" href="css/style.css">
</head>

<body>
</body>
</html>