スマホサイトとPCサイトをひとつで

栃木県の神社のページを公開していますが，スマホ・iPhoneからのアクセスが急速に増えてきています｡
JavaとViewportを使ったサイトは以前から用意しておいたのですが，アクセス数はスマホからPCサイトを閲覧する数とは比べものになりません｡
携帯サイトの時代は，もう終わりかけているので，思いきってPCでもスマホでもそれなりに見えるサイトに作りかえてみました｡
ページ数が500を超えているサイトなので，本当はframeを使って左に目次，右に本文がつくりやすいのですが，スマホの幅は本文で目一杯使いたい，frameは検索に引っかかりにくいという理由で不評らしいので，iframeを使って上部にメニュー，下部に本文の上下二段にしてみました。
苦労したのが左右幅｡スマホサイトの作り方というサイトをながめてみると，ほとんどがviewportを指定しないとダメと書いてあって，これだとデザインがメチャクチャ。
iUiを使ってつくるサイトにはViewportはなくてはならないのでずか，PCと共通にするhtmlではナンセンス｡
いろいろ試したのですが，左右幅を360とか720でつくると，PCでは問題なしでもスマホで本文文字が画面幅の半分になってしまう。
たどりついた幅は「100%」指定｡これでうまくいきます。
あとは本文の文字サイズを22pxに上げて，クリックしやすいようにline-height: 1.8;にして，写真幅も少し大きめにしました。
目次はいままでJavaでプルダウンメニューにしていましたが，iFrameだと目次に戻ったときに閉じてしまってつかいにくい。それで目次も画面一杯に展開するようにしました｡
frameのときには展開したままにできましたが。
ページ数が増えるとframeの方が便利なのですが，復活してくれませんかね｡

PCでは文字が大きくなって読みやすくなり，iPad miniでも見やすくなりました｡
問題はiPod touchです。もともとリンククリックは隣りをつついてしまったり，リロードボタンのつもりが検索になってしまったり，おじiさんの指にはやさしくないのですが，やはりメニュー選択に難があります。高さは44px推奨なので44にしましたが，60くらいにしてもタッチミスします。さらにリンククリックしても反応しないという結果に｡二本指で画面拡大するとつかえますが。まあ，iPodを横にして適宜拡大して使うしかありません。

試しにアクセスしてご意見いただけると幸いです｡

http://kyonsight.com/okami/