またブログの見た目をイジった。

Sponsored Links

あんまり変わってないように見えるかもしれないけど、今日徹夜してめちゃくちゃ弄った。徹夜して昼ぐらいに寝てさっき起きたばかり。

前回スマホ用に別のテーマを選択するようにしてみたけど、結局気に入らなかったので、またもとの1個のテーマに戻した。それで今度はテーマのphpのスクリプトやCSSを色々と修正してみた。

大きな変更は、CSS中で下記の判定により2種類の幅用のCSSを使い分けるようにした所。

/*ここに低解像度スマホ用*/
@media
screen and (min-width: 1020px) ,
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 400px),
only screen and ( min–moz-device-pixel-ratio: 2) and (min-width: 400px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 400px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 400px),
only screen and ( min-resolution: 192dpi) and (min-width: 400px),
only screen and ( min-resolution: 2dppx) and (min-width: 400px) {
/* ここに高解像度用 */

ここがかなり謎な部分。ググルとmin-widthだけで端末の幅をみてスマホ用に表示を変えるみたいに書いてる日本語の記事がかなりヒットするが、たとえば1980×1080のFull HDの解像度があるHTC One Maxでmin-widthだけで判定したページを見に行くと全然スマホ用のページは出てこない。

HTC One Maxは横幅が1080なのに、min-widthに400から500ぐらいで判定される。意味分からない。PCのブラウザの大きさを判定するのには使えるけどスマホ等の判定には使えないみたい。

海外の記事だと上記のように色々なパラメータをみて判断するような例が多かったので、上記のようにそちらを採用した(日本語でも一部の記事は書かれてたけど、min-widthしかか書かれてないアホ記事が多すぎた)。

そんなわけで今は上記判定で2通りのCSSの設定をしてる感じ。記事だけの表示の時にサイドバーを1個消して、記事幅を大きくしてるなんて事もしてる。その辺の設定はかなり苦労した。

これで一応、PCではブラウザの幅が1020pxより大きければ派手なヘッダーのPC用のページが表示さて、それ以下に小さくするとテキストだけのヘッダーな1カラムのページが表示されるはず。

うちにあるスマホだと、FullHD(1920×1080)なHTC One MaxだとPC用が表示されて、
2014-08-23_202503
FullじゃないHD(1280×720)のXperia Z1 comapctやNexus7(1012)だとスマホ用が表示されるのは確認した。
2014-08-23_202540

あとそれから、CSSをいじる以外にもなんか表示が重かったので、色々シェイプアップした。

ヘッダーの画像が元々200kBもあった(←バカ)ので、それを20KBに小さくしたり、ホームやサイドバーに表示されている記事数を半分にした。一部は画像無しのテキストだけのリストにもした。これで画像数が半分になってホームの表示スピードがだいぶ上がったはず。記事中のScreenshotは大量にあるのは変わってないので、そういう記事が重いのはしかたないけど・・・・

まだおかしなところがあるけどもう疲れたので、そのまま公開してる。あとは記事中の画像やYoutubeの表示をうまくスケーリングできるようにしたいな。そこが一番気に入ってない。

Sponsored Links
Pocket
LINEで送る

About Whellie