20100206　iPhoneでの表示最適化

2025年1月24日 07:38

　雑記草$${^{*0}}$$を「iPhone$${^{*1}}$$」用に読み易くした。字が少し大きく表示されるので、読み易くなったと思う。パソコンで閲覧するときは通常通りに表示される。どうやったか。「CSS$${^{*2}}$$」という技法を使った。

　webサイトの表示をiPhoneに最適化する方法を探していたら、「CSS」を使うと簡単にできるとあった。CSSとはCascading Style Sheetsの略で、HTML$${^{*3}}$$の見栄えを定義するためのもの$${^{*4}}$$である。どういう風に記述すればいいかなかなか要領が掴めなかったので、とにかくweb上にあった既存の記述例を参考に雑記草のソース$${^{*5}}$$の<head>と</head>とに挟まれた部分$${^{*6}}$$に次のCSSを付け加えた。

　iPhoneの表示画面は320×480$${^{*7}}$$ピクセル$${^{*8}}$$なので、最大480ピクセルの表示機器の時だけCSSが働く様にしてある。480ピクセルの表示の場合は「css_iphone.css」という別のファイルに記述してある条件$${^{*9}}$$で表示せよ、となっている。その条件は次のようになっている。

body{ width: 960px; -webkit-text-size-adjust: 300%; }
table{ width: 320px; -webkit-text-size-adjust: 110%; }

　試行錯誤の結果、横幅を960ピクセル、文字の大きさを3倍に設定すると何とか見栄えがよくなった。二行目は表題の部分は横幅を320ピクセルに設定した。こうするとiphoneの画面に丁度収まる様になった。ただし、若干、表題内の境界線がずれて通常のパソコンで見るのと違っている。色々試してみたがこれは直らなかった。別ファイルには上記二行しか書いてない。この別ファイルは雑記草のHTMLファイルと同じサーバーの同じ場所(階層)に置いてある。過去の記事も同じ様になっているが、二行目の部分が

table{ -webkit-text-size-adjust: 200%; }

になっている。色々試した結果、これで最適に表示された。

　ついでにiPhoneのホーム画面$${^{*10}}$$に表示される「雑記草アイコン$${^{*11}}$$」も付け加えた。57×57ピクセルのpng$${^{*12}}$$形式のアイコン用画像を用意して、雑記草のソースのCSSを追加した部分と同じところに次の一文を加えた。

　「zakkisou_i.png」はアイコン用画像のファイル名である。CSSの別ファイルと同じ様に雑記草と同じ場所に置いた。iPhoneに表示された雑記草をホーム画面に追加するとこんな感じに表示される$${^{*13}}$$。

*0　雑記草
*1　20091208　iPhoneを買った
*2　とほほのスタイルシート入門（基礎知識）
*3　HTMLとは【HyperText Markup Language】 - 意味/解説/説明/定義： IT用語辞典
*4　CSSとは【Cascading Style Sheets】 - 意味/解説/説明/定義： IT用語辞典
*5　HTMLソースを見やすくしたい！ - ［ホームページ作成］All About
*6　<head> - ヘッダ
*7　アップル - iPhone - 技術仕様
*8　ピクセルとは【pixel】 - 意味/解説/説明/定義： IT用語辞典
*9　とほほのスタイルシート入門（基礎知識）　■ スタイルシートを外部ファイルで定義する
*10　アップル - iPhone - iPhoneのホーム画面をアプリケーションでカスタマイズ。
*11　20020403　雑記草マーク
*12　PNGとは【Portable Network Graphics】 - 意味/解説/説明/定義： IT用語辞典
*13　iphone_home.gif

20100206 iPhoneでの表示最適化

いいなと思ったら応援しよう！

20100206　iPhoneでの表示最適化