①基本的に、html5、でコーディング。
②スマホ用に『Viewport』を設定。
『Viewport』とは、モバイルsafari・アンドロイドが採用している仮想ウィンドウサイズのこと。
Viewportが980pxで設定されているため、PCサイトは凝縮され、全体が見える。
のに対してスマホ用に作ったサイトも凝縮されてしまうので、サイズを設定する。
▼Viewportはhead内のmeta要素で追加
<meta name="viewport" content="★★★"/>Viewportの↓★★★の中に入るもの
①width…横幅の設定、機種によって横幅は違うので「device-width」を指定
②initial-scale…初期の画面の倍率を指定、「1」なら1倍。省略すると自動的に調整
③maximum-scale…拡大したときの最大の倍率を指定、「1」に指定すると、拡大できなくなる
④user-scalabel…ユーザーによる拡大縮小の許可（yes or no）
⑤minimum-scale…最少倍率の指定
＜例＞※「,」で区切る
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalabel=no"/>width=device-width・・・携帯の機種によって自動でサイズを合わせてくれる
initial-scale=1…初期の倍率
maximum-scale=1…拡大可能な最大の倍率
※「1」を指定することによって、拡大できないようにしている
user-scalabel…ズーム操作（ユーザーが操作できるかできないか【yes】か【no】）
※デフォルトは【yes】
◆リセットCSS
気になる人は、異なるブラウザ（スマホ・アンドロイド）でスタイルだいたい統一させるためにいったんリセットさせる。
下記サイトからリセットCSSをダウンロード
http://code.google.com/p/html5resetcss/
名前を変更などして、フォルダに置きます。
さらに…
iphoneは電話番号らしきものをみつけると、自動的にリンクになってしまうので、それを解除しておく。
メタの追加↓↓※閉じタグはあってもなくてもいいのです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalabel=no">
<meta name="format-detection" content="telephone=no">
<title>無題ドキュメント</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>電話番号のリンクをつけるときはtel:をつかう
▼HTML側▼
<p><a href="tel:03-xxx-555">03-xxx-555</a></p>スマートフォンサイトでのViewport設定 - 新世代Web制作テクニック総特集 - MdN Design Interactive
http://www.mdn.co.jp/di/articles/2742/?page=10
◆スマホ用の簡単なテンプレート
→HTML5をとりあえず、コピペ
↑の（例）をmetaタグに追加、リセットCSSも追加
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalabel=no"/> <title>javascript</title> <script src="js/test.js" ></script> <link rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="reset.css" /></head> <body> ここに内容 </body> </html> ------------------- 参考書籍 ------------------
0 件のコメント:
コメントを投稿