2018.05.11

viewport設定でレスポンシブ？デバイス対応のトレンドとは？

WEB技術

レスポンシブデザインが当たり前になっている今、最近ではデバイスに応じて
viewportの値を変更するサイトを多く見かけるようになりました。

タブレットではPCの縮小版のほうが分かりやすいという声も多いので、
クライアントの要望やターゲットに合わせて方式を決定していくと良いと思います。

ちなみに、現在のレスポンシブデザインのデメリットは…

・コンテンツの重要度とレイアウトサイズがマッチしない場合がある。
・スマホで一番小さい解像度に合わせてレイアウトしなくてはいけない
（ヘッダーにはあまり多く配置できない）
・単純に工数がかかる。

上記のデメリットを解決する1つの手段として、ぜひ参考にしてみてください。
作業はとても簡単。まずは、以下のタグをヘッダー内に記述します。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,shrink-to-fit=yes">
<script src="js/viewport.js" type="text/javascript"></script>

次に、以下のタグをjsとして保存。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

var baseW = ☓☓☓;
function updateMetaViewport(){
var viewportContent;
var w = window.innerWidth || document.documentElement.clientWidth || 0;
if(w >= baseW){
viewportContent = “width=”+”PCのサイズ”+”px,user-scalable=yes,shrink-to-fit=no”;
}else{
viewportContent = “width=”+”スマホのサイズ”+”px,user-scalable=yes,shrink-to-fit=no”;
}
document.querySelector(“meta[name=’viewport’]”).setAttribute(“content”, viewportContent);
}

window.addEventListener(“resize”, updateMetaViewport, false);
window.addEventListener(“orientationchange”, updateMetaViewport, false);
var ev = document.createEvent(“UIEvent”);
ev.initEvent(“resize”, true, true)
window.dispatchEvent(ev);

以上。
基準となるブレークポイントを変更したい場合は、値（☓☓☓）の数値を変えてみてください。
※技術的にはjQueryを使わないよう注意

キャリア毎のサイズ別のデバイスを確認して、微調整するという作業は
どんどんなくしていきたいというのが制作会社の本音。

クオリティを担保したまま、各デバイスに完全に対応できるのなら、
積極的に取り入れていきたいですね。

クリサイ
pagetop