ブログ | 採用サイト制作、採用動画制作、採用パンフレット制作、採用ブランディングに強い制作会社【採用おむすび】

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を使わないよう注意

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

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

運営元：株式会社ゴマシオカンパニー

ゴマシオカンパニーは、採用広報支援を目的としたクリエイティブを得意とする企画制作オフィスです。この分野で20年以上実績を積み上げてきた代表を中心に、様々な分野のクリエイティブを得意とするスタッフが、日々アイデアを出し合い、お客さまの採用課題解決に尽力しています。

コーポレートサイトはこちら

pagetop