お世話になります。
スマホの表示について、何度か他の方の要望もあるようですが、
やはり記事の一覧性が高いほうがスマホで見やすいと思いました。
narrow.cssにて低解像度端末を639px、縦横切替を440pxの閾値で判別されているようですが、
スマホの縦持ち状態でも、アイキャッチ画像を小さくして複数の記事(2エントリぐらいは)が1画面に表示されるようにしていただけると、とても見やすいと思います。
具体的には、関連記事表示部のように、です。
ここで言うスマホを具体的に言うと、ブラウザの幅が320pxのiPhone3GS~5Sと、
360pxの5インチ前後の液晶を持つスマホです。(XPERIA、AQUOS、ARROWS、Galaxy等のシリーズ)
あわよくばカスタマイザー(若しくはスキン)でスマホ表示側の表示スタイルも選べるようになると非常に嬉しいのですが、(そうするとスキンがstyleとmobileで分裂するような気がしますが、)
当面の対応として、とりあえず私のスキンは以下のように設定してみました。
mobile.css
@media screen and (min-width:311px) and (max-width:479px){
.entry-thumb img {
max-width: 75px;
max-height: 75px;
-ms-interpolation-mode: bicubic;
}
.entry-content { margin-left: 85px; }
#main div.entry {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 2px solid #ccc;
}
}
同時に、narrow.cssで読み込まれる設定を取り消して上書きする方法がわからなかったので、
幅の指定 649px → 479px , 440px → 310px だけ変更ました。
関連記事は100pxのようですが、それより画像を小さくしているのは、
iPhoneを最も重要視している為です。(私の端末はXPERIAですが)
今のところ期待したとおりの表示結果を得ていますが、
少し強引な設定になっている気がするので、これで合っているのかわかりません。
どこかまずいところがあればご指摘いただけますと助かります。
以上、よろしくお願いします。