blog

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

タグ: , , , ,

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

最新情報をお届けします

楽天モバイル

楽天モバイル、12月5日、7日にも半額タイムセールを開催

12月3日から楽天スーパーSALEが開催されており、楽天モバイルでもZenFone 3 Ultraが半額などのセールが行われていました。 ZenFone 3 Ultraは1,000台が3分ほどで完売し

KODAK Extra

KODAKのデジカメスマートフォン、EKTRAは12月9日にドイツで発売

KODAKが10月末に発表したデジカメスマートフォン、Etraが12月9日にドイツで発売になるとのことです。 関連:KODAK、21MPのカメラを搭載したスマートフォン KODAK EKTRAを発表

この世界の片隅に

「この世界の片隅に」原作コミックがAmazonでポイント44%還元中

Amazonで「この世界の片隅に」の第1巻がポイント44%、第2巻、3巻が21%とお安くなっています。 今絶対に観るべき作品「この世界の片隅に」 公開中の映画、「この世界の片隅に」を観てきました。 普

TONE m15

TONEモバイルのスマートフォン、TONE m15をレビュー 子供に持たせるにはちょうどいいかも

名前だけは知っていたものの、個人的にはかなり未知のMVNOサービスだったTSUTAYAのスマホ「TONE」。 今回、リンクシェア経由で端末をお借りして初めて弄ってみました。 決してハイスペックな端末で

楽天モバイル

楽天モバイル、楽天スーパーSALEでZenFone 3 Ultraを32,800円で販売

12月3日(土)19時から楽天スーパーSALEが開催されますが、このセール期間中、楽天モバイルが12月9日に発売予定のZenFone 3 Ultraを数量限定で約半額の32,800円(税込)で販売しま

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

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

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

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

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

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEIの最新モデル、HUAWEI Mate 9を購入したので早速レビューです。 まだ1ShopmobileやExpansys、GearBestなどのECサイトには入荷していなかったので、今回...

(追記:iOS10.1から消せなくなりました)iPhone 7のシャッター音を消す方法

(追記:iOS10.1から消せなくなりました)iPhone 7のシャッター音を消す方法

※2016/10/25追記:iOS10.1へのアップデートで、下記の無音バグは修正されてしまいました。 下記の方法ではシャッター音の無音化は行えません。 必要なら、無音で写真が撮れる代替えアプリ...

海外版の5.5インチZenFone 3、ZE552KLをレビュー 日本版の5.5インチとは仕様が違います

海外版の5.5インチZenFone 3、ZE552KLをレビュー 日本版の5.5インチとは仕様が違います

中国のECサイト GearBestから5.5インチ版のZenFone 3 ZE552KLを提供していただいたので、さっそくレビューしたいと思います。 なお、5.2インチ版 ZE520KLは下記で...

MENU

back to top