DIARY初めにお読み下さい展示室WORKSDOJINおみやげリンクメール
Invalid category filter: Invalid category filter: Invalid category filter: Invalid category filter: | |

iPhone対応化

| 編集

当サイトをiPhone対応に改造しました。
iPhoneのsafariで閲覧した場合に自動的に最適化されます。

Img 0001

横スクロールせずに閲覧可能。コメント書き込みも出来ます。
PCサイトと全く同じコンテンツを表示します。
上部のナビゲーションボタンが押しにくいのでセレクタにしました。「NAVIGATION」ボタンを押してから行き先を選んでください。
くぱぁアクションによる拡大縮小を出来なくしてありますが、ダブルタップで画像の拡大が出来ます。
長い記事タイトルのレイアウトが崩れるときがありますが仕様です。横長モードにするとキレイに表示されます。
記事中の画像をタップすると拡大表示されるものがあります。閉じる場合は、画面外右下にcloseボタンがあるのでスクロールしてからタップしてください。

続き

というか、cssによる表示切り替えをしているだけなので、html要素はPCサイトと全く同じ。ユーザーエージェントで判別転送しているわけではないのでユーザーエージェント偽装してもiPhone用サイトは表示されません。

このサイトは全てMovable typeというBlogソフトで構成されています。MTで標準テンプレートを使われている方はblog.cssを外すだけでリキッドなレイアウトになりますので、あとは<head>に

<meta name="viewport" content="width=320, user-scalable=yes, initial-scale=1.0" />

と書き込めば幅が固定されて簡単iPhone用サイトのできあがり。くわしくはこの辺りを参考にして下さい。

って、サイトが出来上がったころに「iPhoneテンプレート For MT」というものが出来ておりました。

でも折角フルブラウザを積んでいるiPhone何だから出来るだけPCサイトと同じように見えた方が良いじゃん! 特にイラストを展示しているサイトは。


とかいいつつiPhoneでしか見えないページとか作っているけどね!

Invalid category filter: Invalid category filter: Invalid category filter: Invalid category filter: | |

Invalid category filter: Invalid category filter:
 

LANGUAGE

banner



Koichi Mugitani

バナーを作成

Powered by Movable Type 4.22-ja