スマートフォン専用サイトを一から作る第1回

スマートフォン専用サイトならではの記述

手打ちでスマートフォン専用サイトを制作する。今回はhtmlのhead部の指定について学習する。

スマートフォン専用サイトの注意点

前回はcmsを利用してスマートフォン専用サイトを作った。今回はhtml,cssの記述から構築する。主な注意点として、下記が挙げられる。

対応ブラウザ、OS、機種の仕様を確認の上作業に入る。
画像を極力使わない。軽量なサイトを目指す。
ピンチアクションを許可しなくても使えるサイトにする。
縦画面だけで使えるサイトにする。

html記述 viewport

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

レスポンシブデザインのときにはcontentのみ指定していたが、initial-scale=1.0とuser-scalable=noが追加されている。

initial-scale=1.0

画面を縦で固定するかについて指定する。大きな絵を見せたいなどの希望がない限り、縦画面固定が望ましい。

縦画面で固定:1
横向き画面表示を許可する:0

user-scalable=no

ピンチアクションで拡大縮小の操作を許可するかについて指定する。細かい資料を見せる必要がある場合などを除き、許可しない指定が望ましい

ピンチアクションを許可する:yesまたは1
ピンチアクションを許可しない:noまたは0

html記述 format-detection

<meta name="format-detection" content="telephone=no">

電話番号の指定のない数値の羅列に対し、電話を自動でかけない指定。
古いiPhoneの仕様で、数値の羅列を電話番号として自動認識する機能があった(現在は実装されていない)。このmetaを指定することで、この機能をoffにできる。なお、現在は下記のような記述をすることで数値の羅列を電話番号として認識させる。

<address>
連絡先：<a href="tel:00-0000-0000">00-0000-0000</a>
</address>

apple-touch-icon(デスクトップアイコン)

<link rel="apple-touch-icon" href="apple-touch-icon.png">

apple-touch-iconを指定する。デスクトップにショートカットをアイコンとして配置するために必要。ブラウザを起動してからブックマークを使ってサイトにアクセス件数は減少しており、この機能はたいへん重要である。現在最新機種となるiPhone6では180pxでの表示となっており、これより大きく作るべきである。

検索(アドレス)バーを隠す

<script">
window.addEventListener('load',
  function(){
      setTimeout(function(){
      scrollTo(0,1);
    },100);
  },
false);
</script>

ブラウザについている検索バーを隠す。bodyの最後に書く場合もある。狭い画面を有効活用するためには必須である。

今回はここまでとする。

考え、感じる、Web制作。

Web制作の学習や情報についての記事が中心です。