【1】 gzip圧縮したファイルもアップロードして、gzip対応環境に応じてRewriteによるリダイレクトさせる。

　例えば今の当ブログ、【jquery-1102min.js】、【lightbox-26min.js】を読み込んでいる様に見えますが、よっぽど古い環境でない限り【jquery-1102min.js.gz】、【lightbox-26min.js.gz】がロードされています。今のところ【IE10】、【Firefox25】、【Chrome30】、【IOS7 Safari】といったブラウザで正常に動作しているようです。

　Apacheの設定用の.htaccessファイルで次の様にgzip対応の場合にリダイレクトさせます。これらはprototype.js gzipとググると情報が得られるので詳しくは参照のこと・・・。

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

ForceType application/x-javascript
AddEncoding x-gzip .gz

　【2】 画面解像度に対するデザイン適応を、単一CSSファイル内で分岐対応する。

　一定の画面サイズに満たない環境では、サイドの空白を無くしたいという話だったのです。パソコンのブラウザで当サイトを左右縮めていくと、まず左右の空白が可変します。でもAndroidやiPhoneだと挙動が違い、画面が小さいクセに無駄に空白を作っていまいます。なお、今となっては解決しているので意味不明ですね。

　当ブログでは#container-innerという要素で外枠を最大780pxで可変できるようにしてmarginのautoを使っています。そこをmedia screen and max-device-widthが780px以下でmax-width指定無しとします。意味が分かりにくかったのが、スマートフォンも1920x1080といった高解像度なんですよね。でもそんなドットバイドットじゃ使いづらいので、スケール倍率が設定されていてmax-device-widthとして、設定されたものが得られるという・・・ワケの分からない説明で申し訳ない。

【外部cssファイルにて】

#container-inner {
??? max-width: 780px;
??? margin: 0 auto;
??? padding: 0;
??? position: relative;
??? background: none repeat scroll 0% 0% rgb(230, 230, 210);
}
@media screen and (max-device-width:780px){
??? #container-inner {
??????? max-width: none;
??? }
}

　viewportいうhtmlでのスマホ用タグでサイズ指定方法も試したのですが、各解像度用CSSを用意してデザインしないとダメだと思いました。文字サイズと画像サイズの整合性がとれません。

　これはレスポンシブWebデザインと言われ、状況に応じてデザインの可変させるという話に共通することです。一定のサイズ以下ではサイドメニューを消すとか、縦に並べるといったことがCSSで出来てしまうのです。

　MovableTypeでの標準スタイルの中にも、画像までも可変としてスマホにまで対応するというレスポンシブWebデザインがあります。CSSファイルの動的切替といったこともしていて、面白いですが・・・めんどくさいので自分で構築する予定はありません(^_^;)