ブログのデザイン変更 モバイル向けもPCサイトと同じデザインにしました

2013.5.19 (更新日:2016.03.02)
blog

ブログのデザインをまた変更してみました。といってもPCで見る分にはあまり変化はないのですが。今回は主にモバイル向けデザインの変更です。

いままではレスポンシブデザインでモバイル向けサイトをデザインしていましたが、スマートフォンのブラウザにはPC向けサイトを良い感じに縮小表示してくれる機能が備わっているのだから、これを上手く使いたい、っと思っていました。そもそもモバイル向けだからといって情報量を少なくしたりするのはどうかと思うのですよ。

viewportの設定

そんなわけで、レスポンシブデザインはやめて、サイト自体を横幅768pxサイズで固定とし、モバイル向けにもPCサイトをそのまま表示させることにしました。viewportの指定は

<meta name="viewport" content="width=768">

です。ただこれをやるとフルHDのタブレットで見たときに画面いっぱいに引き伸ばされてしまってかえって見難くなってしまいます。なので、以前使った「is_mobile()」という関数を使ってスマートフォンとタブレットでviewportの指定を変えるようにしました。

&lt;?php if(is_mobile()) { ?&gt;
   &lt;meta name="viewport" content="width=768"&gt;
&lt;?php } else { ?&gt;
   &lt;meta name="viewport" content="width=device-width,maximum-scale=5,user-scalable=yes"&gt;
&lt;?php } ?&gt;

text-size-adjustの設定

Viewportで表示サイズを縮小してしまうと文字も小さくなってしまうのでそのまま読むのは辛いです。

IMG_0145 IMG_0146

例えばiPhone 3GSで表示されせるとこんな感じです。読めなくはないけどちょっと小さいですね。Androidの場合もNexus 4やHTC Oneなど解像度が高い端末ならこのままでも問題なく読めますが、Xperia goなどの解像度が低めの端末だと厳しいです……っと言いたいところなのですが、AndroidのChromeブラウザでは微妙な現象が発生しました。

xperia go xperia go

トップページの表示は変わりませんが、なぜか個別ページの本文のみ拡大表示されます。特に指定はしておらず、拡大されるのも本文のみ。記事タイトルは拡大されません。Xperia goにかぎらず、他の機種のChromeでも同じ状態だったのでこれはChromeが何かしら調整してくれているんでしょうか?

Xperia go xperia go

なお、Androidの標準ブラウザだとまた別種の問題があって、トップページは問題ありませんが、個別記事の表示が上のように横幅が短くなってしまいます。どうやらAndroidの標準ブラウザではViewportの指定に問題があるようで、この場合も自端末の解像度(幅320px)で表示してしまっているようです。Javascriptを駆使すると解決できるようですが、今回はとりあえず目をつぶります。

若干話しがそれましたが、この縮小されて文字が小さくなってしまう問題に対応するために、「text-size-adjust」というCSSのプロパティが用意されています。

例えば下記のような指定を追加してみます。

  -webkit-text-size-adjust:200%;
  -moz-text-size-adjust:200%;
  -ms-text-size-adjust:200%;
  line-height:24px;

text-size-adjustに100%以上の設定をすると、Line-heightも比率に合わせて大きくなってしまうため、絶対値で指定しておく必要があります。

iPhoen3GS_text-size-adjust200% iPhoen3GS_text-size-adjust200%

200%したiPhone 3GSでの表示。無指定の場合に比べて文字が大きく読みやすくなりました。

iPhoneだけならこの設定で問題なさそうですが、残念ながらAndroidは未対応のようで標準ブラウザもChromeでも変化はありませんでした(Chromeはもとから勝手に拡大してくれているのであれですが)。

モバイル端末のみフォントサイズを拡大する

text-size-adjustを使った方法がうまくいかなかったので、別の方法を考えてみました。Viewport指定で文字が縮小されてしまうなら、その分文字サイズを大きくしてあげればいいはず。

このサイトはベースのフォントサイズを16pxとして部分的にフォントサイズを相対指定しています(ところどころ絶対指定ですが)。

というわけで、

body {
   font-size:24px;
}

とだけ書いた外部スタイルシートを用意し、Viewportの設定をした部分でモバイル端末の場合のみこのスタイルシートを読みこませるようにしてみました。

<?php if(is_mobile()) { ?>
   <meta name="viewport" content="width=768">
   <link rel="stylesheet" href="/weblog/wp-content/themes/dreamseed/style_mobile.css" type="text/css" media="all">
<?php } else { ?>
   <meta name="viewport" content="width=device-width,maximum-scale=5,user-scalable=yes">
<?php } ?>
iPhone3GS_font-size24px iPhone3GS_font-size24px

iPhone 3GSでの表示。上手く行っているようです。

Xperia go 標準ブラウザ24px Xperia go 標準ブラウザ24px

Xperia goの標準ブラウザでも改行の問題はありますが、文字サイズは大きくなりました。

Xperia go chrome24px Xperia go chrome24px

ChromeならXperia goでも問題なく表示できます。

微調整は必要だけど、フォントサイズを変更するのが有効だと思う

そんな感じで、すべてのフォント指定を相対的に行う必要はありますが、モバイルの場合のみフォントサイズを大きくするというのが現状では有効な手段ではないかと思います。

もちろんモバイル用のサイト、デザインを別途作成するというのが通常の対応なのでしょうが、いちいちAdsenseの広告サイズを変えたり、画像サイズを調整したりという手間がないのでPCサイトと同じデザインを縮小して使うというのもアリなんじゃないでしょうかね。

まだ行間など調整が必要な箇所もありますし、低解像度なAndroid標準ブラウザでへの対応も考えないといけないのですが、当面はこの方法で運用して見ることにします。

mobile gadget

最後に、今回の表示テストで使った端末たち。こういうときに使える実機があると楽ですね。iPhone 4が壊れてしまっているのが痛い(前にバッテリ交換したけどまた起動しなくなった)ので、なんとかしたいところです。

タグ: , , , ,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Amazon、Wiko Tommyの予約を開始 2月25日発売

2月25日に発売されるWikoの格安端末、Tommyの予約がAmazonでも始まりました。 関連:フランスメーカーWikoが日本参入 低価格モデルTommyを2月25日に発売 – Dream Seed

クアトロガッツの小さいふ「ポキート」の使い勝手が知りたかったので、作ってみた

モバイルプリンスの影響もあって、ずっと気になっていたクアトロガッツの小さいふ「ペケーニョ」。 → クアトロガッツ公式 しかしお札のたたみ方が変則的で、レビュー見ると、端っこが少し折れてしまうらしく「う

イオンモバイルが1周年記念キャンペーンを開始

イオンモバイルがサービス開始1周年を記念して、「ありがとう1周年キャンペーン」を開催しています。 イオンモバイル ありがとう1周年キャンペーン キャンペーン内容としては「抽選で基本料金最大1か月無料」

スマートフォンをPCのキーボードやタッチパッドとして使える「AnyTouch Blue」がKickstarterで出資募集中

スマートフォンをPCのマウスとして使うというものはこれまでもいつくかアプリがリリースされていますが、それらとはちょっと違う感じの製品「AnyTouch Blue」がKickstarterで出資募集中で

XiaomiのCEO、Mi MIXの次期モデルを開発中と公表

Xiaomiが2016年10月末に発表し、世間をあっと言わせたベゼルレス端末Mi MIX。 その後継機の開発(少なくとも検討)が行われていることが明らかになりました。 関連:Xiaomi、6.4インチ

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

名前だけは聞いたことはあるものの、使っている、活用しているという話をあまり聞かないMiracast(ミラキャスト)、どんなものかと思って実際に使ってみました。 ...

今更だけど、Xiaomi Mi Pad 2をレビュー メディアプレーヤーとしては良さそう

今更だけど、Xiaomi Mi Pad 2をレビュー メディアプレーヤーとしては良さそう

中国のECサイト、GearBestからXiaomi Mi Pad 2を提供頂きました。 Mi Pad 2にはWindows 10モデルもありますが、今回のはAndroid版、RAM2GB ROM1...

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

HUAWEI P9よりもおススメ! honor 8の詳細レビュー

上位機種のHUAWEI P9と同等のスペックを持つhonor 8の詳細レビュー。HUAWEI P9やASUS ZenFone 3と比較しながら紹介します。...

クアトロガッツの小さいふ「ポキート」の使い勝手が知りたかったので、作ってみた

クアトロガッツの小さいふ「ポキート」の使い勝手が知りたかったので、作ってみた

モバイルプリンスの影響もあって、ずっと気になっていたクアトロガッツの小さいふ「ペケーニョ」。 → クアトロガッツ公式 しかしお札のたたみ方が変則的で、レビュー見ると、端っこが少し折れてしまうら...

「HUAWEI P9」と「HUAWEI P9 lite」どちらを買うか悩んでいる人のためスペックを比較

「HUAWEI P9」と「HUAWEI P9 lite」どちらを買うか悩んでいる人のためスペックを比較

HUAWEI P9とP9 lite、どちらを購入するか悩んでいる人のために、スペック比較と選ぶためのポイントになりそうな箇所をピックアップしてみました。...

MENU

back to top