ブログのデザイン変更 モバイル向けも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が壊れてしまっているのが痛い(前にバッテリ交換したけどまた起動しなくなった)ので、なんとかしたいところです。

タグ: , , , ,

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

最新情報をお届けします

AUKEY、日替わりで対象製品が半額になる「当日だけのお買い得」キャンペーン、対象製品が最大79%オフの「2017新春セール」を開催

AUKEYが1月23日~2月6日の間、日替わりで対象製品を半額で購入できるというキャンペーン、そして1月23日~2月1日には「2017新春セール」として対象製品が最大79%オフになるキャンペーンを実施

Android 7.0 Nougatではタスクボタンのダブルタップで直前に表示していたアプリに切り替え可能

Android 7.0 / 7.1 Nougatでは以前にも紹介したマルチウィンドウ機能やイースターエッグなど、存在がわからない機能があるのですが、そんな中の一つにタスクボタン(マルチタスクボタン)の

1月27日発売のFREETEL RAIJIN(雷神)、Amazonで約3,000円安く予約受付中

FREETELの最新機種、RAIJIN(雷神)が1月27日(金)に発売となります。 大容量バッテリを搭載したFREETEL RAIJIN(雷神) 5.5インチの大画面にバッテリは5,000mAhという

FREETEL、299円の全プラン対応パックに3か月間データ容量が増量されるAmazonプライム会員限定プランを提供中 ただし価格は322円

最近、ドコモからの費用増に伴い、初期費用の値上げが行われているMVNO(格安SIM)ですが、そんな中でもダントツに安い初期費用299円で提供しているFREETELの全プラン対応パック。 その全プラン対

Google Play Service 10.2でAndroidのテザリングが便利になる「Instant Tethering」という新機能が追加

Android 7.1.1とGoogle Play Service 10.2で「Instant Tethering」という新しい機能が利用可能になるようです。 通常、Androidのテザリングではホス

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

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

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

FREETEL、299円の全プラン対応パックに3か月間データ容量が増量されるAmazonプライム会員限定プランを提供中 ただし価格は322円

FREETEL、299円の全プラン対応パックに3か月間データ容量が増量されるAmazonプライム会員限定プランを提供中 ただし価格は322円

最近、ドコモからの費用増に伴い、初期費用の値上げが行われているMVNO(格安SIM)ですが、そんな中でもダントツに安い初期費用299円で提供しているFREETELの全プラン対応パック。 その全プ...

Android 7.0 Nougatではタスクボタンのダブルタップで直前に表示していたアプリに切り替え可能

Android 7.0 Nougatではタスクボタンのダブルタップで直前に表示していたアプリに切り替え可能

Android 7.0 / 7.1 Nougatでは以前にも紹介したマルチウィンドウ機能やイースターエッグなど、存在がわからない機能があるのですが、そんな中の一つにタスクボタン(マルチタスクボタン...

Google Play Service 10.2でAndroidのテザリングが便利になる「Instant Tethering」という新機能が追加

Google Play Service 10.2でAndroidのテザリングが便利になる「Instant Tethering」という新機能が追加

Android 7.1.1とGoogle Play Service 10.2で「Instant Tethering」という新しい機能が利用可能になるようです。 通常、Androidのテザリングで...

1月27日発売のFREETEL RAIJIN(雷神)、Amazonで約3,000円安く予約受付中

1月27日発売のFREETEL RAIJIN(雷神)、Amazonで約3,000円安く予約受付中

FREETELの最新機種、RAIJIN(雷神)が1月27日(金)に発売となります。 大容量バッテリを搭載したFREETEL RAIJIN(雷神) 5.5インチの大画面にバッテリは5,000mA...

MENU

back to top