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

タグ: , , , ,

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

最新情報をお届けします

Red以外も欲しい? iPhoneを好きなカラーに塗装できる「あいりぺColor」が間もなくサービス開始

iPhone 7/7 Plusの(PRODUCT)REDが発売になり、話題になっていますが、もっと他の色も欲しいと思っている人もいるかもしれません。そんな人の要望を叶えてくれる、iPhoneのペイント

Xiaomiの三脚にもなる自撮り棒を購入 三脚としてもそれなりに使えそう

以前に紹介したXiaomiの自撮り棒をGearBestで購入してみました。 関連:Xiaomiの三脚にもなる自撮り棒がGearBestで販売中 – Dream Seed 自撮り棒自体は割と普通。プラス

手作りスライドQWERTY端末 ZERO Terminal 意外と実用性はありそう

最近何かとQWERTYデバイスが話題に上がりますが、今回紹介するZero Terminalもなかなかのものです。 とてもコンパクトで心惹かれるものがありますが、製品ではなくDIYで制作された手作りガジ

楽天モバイル、ハイレゾスマホGRANBEATと同時契約で月額基本料3か月無料キャンペーン

楽天モバイルがオンキヨーのハイレゾスマホGRANBEATをSIM契約と同時に購入すると、月額基本料が3か月無料になるというキャンペーンを実施しています。 GRANBEAT同時購入で事務手数料+月額基本

BenQ、コストコ専売でモバイルプロジェクタ「GS1」を発売、明るさ300lm コントラスト比は100,000:1

BenQが、コストコ専売でモバイルプロジェクタ「GS1」を発売します。価格は50,000円前後になるようです。 最近、各社からリリースが相次いでいるモバイルプロジェクタですが、BenQのGS1はコスト

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

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

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

Red以外も欲しい? iPhoneを好きなカラーに塗装できる「あいりぺColor」が間もなくサービス開始

Red以外も欲しい? iPhoneを好きなカラーに塗装できる「あいりぺColor」が間もなくサービス開始

iPhone 7/7 Plusの(PRODUCT)REDが発売になり、話題になっていますが、もっと他の色も欲しいと思っている人もいるかもしれません。そんな人の要望を叶えてくれる、iPhoneのペイ...

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEIが若者向けのシリーズとしてあらたに投入したのnova、その下位モデルという位置づけのnova liteを購入してみました。 nova liteは公式ショップや量販店では販売しておらず、...

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

HUAWEI nova liteの安いけどおススメのケース ケースで迷ってたらとりあえず買って損はしない

現在一押しのミドルクラス端末、HUAWEI nova liteのケースを購入してみました。 買ったのは、NILLKINというブランドのケース。 ...

手作りスライドQWERTY端末 ZERO Terminal 意外と実用性はありそう

手作りスライドQWERTY端末 ZERO Terminal 意外と実用性はありそう

最近何かとQWERTYデバイスが話題に上がりますが、今回紹介するZero Terminalもなかなかのものです。 とてもコンパクトで心惹かれるものがありますが、製品ではなくDIYで制作された手作...

MENU

back to top