1. nknkt

    Posted

    nknkt
Changes in title
+スマホサイトの製作時に注意することと対策まとめ
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,43 @@
+
+#始めに
+スマートフォンのサイト制作の際に注意、意識すべきこととその対策法を簡単にまとめ。
+
+意外とちゃんと全てできてない気がする
+
+あくまでスマホサイト制作のまとめであり、レスポンシブデザインのまとめではない。
+
+
+##デバイス幅は固定されている
+PCとは違い基本的にスマートフォンではブラウザを縮小、拡大はできない。
+デバイス幅は固定幅になる。
+###どうする?
+viewport設定をする
+
+```例
+<meta name="viewport" content="width=device-width,initial-scale=1">
+```
+
+##デバイス幅が機種でバラバラ
+iPhone5,6,7にandroidに機種によってバラバラ。ほぼ無限。
+
+###どうする?
+リキッドデザインで作る
+幅はピクセルで指定しない
+
+```例
+ % rem em
+```
+
+##wi-fiのない3G回線など遅い環境を想定
+画像やJS、動画を極力減らす
+
+###どうする?
+CSS3のanimationを利用
+
+##タッチパネル操作で作る
+スマートホンはタッチ、フリックなど指を使って操作する。
+手の大きさ、小さな画面の中でも使いやすいことを意識する。
+
+###どうする?
+直感的に操作できる設計をする
+タッチ操作の指の大きさを意識する