JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年08月 / 07月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>09月

アクセスランキング

[ジャンルランキング]
コンピュータ
385位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
52位
アクセスランキングを見る>>

画面横幅によってviewportを分ける

久々にWEB製作関連の記事です。

最近、某CSSフレームワークとそのテンプレートを使ったWEBページのスマホ対応を行ったのですが、その中に最小横幅420pxの要素が含まれていました。具体的には横幅が420px未満の端末ではoverflow扱いの横スクロールで表示、420px以上であれば画面サイズに合わせて伸縮するという仕様です。
ここ数年でスマホが巨大化しているとはいえ、実表示領域の横幅が420pxにもなる端末はそう多くはありません。
#まあ画面解像度だけみればとっくの昔に超えていますが。。

要は、ほとんどの端末ではみ出るわけです。

というわけで、viewportの指定を使って調整することにしました。これまではおまじないのようにdevice-widthを指定してたwidthの値を、今回は少しいじってみます。

width=420にした場合、タブレット端末等で超拡大された表示になるので、見にくくなります。
それで解決として良い場合もありますが、今回はそれを避けるために少々面倒なことをします。

#そもそもviewportってなんだっけ?という方向けに念のためざっくり書いておくと、「任意の横幅の仮想的な描画領域を作って」「その仮想的な描画領域を拡大・縮小したものを、実際の端末に描画する」ことで、「画面サイズが違ってもいい感じに表示できる」という機能です。わかりにくいですね。ググるともっといい説明がたくさんあります…

はじめは、「screen.widthをとってsetAttribute/document.write」で実装しました。
しかし、ここで問題が。Android4.xではこの値が端末の実解像度になってしまう(devicePixelRatio乗じた値になる)そうです。
今回はUAで判断してどうこうという小細工は避けたかったので、もっと一般的に使える方法を検討することにしました。

その結果、window.matchMediaを使うことになりました。CSSのmediaクエリをJSから扱えるという代物で、互換性はAndroid 3.x〜、iOS5.x〜なので、今時の端末のほぼ全てに対応していることになります。

window.matchMedia - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia

方法は、①width=device-widthを指定した上で、②max-widthのmediaクエリに該当するかどうかを判断する、という流れです。

コードはここまでの文章をそのまま記述したような内容です。

<meta  name='viewport'  content='width=device-width'>
<script  type="text/javascript">
(function(){
    if  (window.matchMedia && window.matchMedia("(max-width:  420px)").matches)  
        document.write("<meta  name='viewport'  content='width=420'>");
})();
</script>

#setAttributeでもいいですが、こっちのほうがちゃんと動いてくれる感じがするので(?)昔ながらのdocument.writeを使っています

あまりきれいな解決策とは言えないですね。
まあ、「工期・テンプレートの都合上どうしても」という場合にはこういう手もありだと思います。
 


 
   WEBページ制作    TB(0)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。