KEPRATE(ケプレイト)｜大阪府枚方市・交野市・寝屋川市を中心に活動しているフリーランスWeb制作事務所 WordPress・レスポンシブ対応ならおまかせ！
お問い合わせ

JavaScriptでuseragentを取得しviewportの設定やブラウザ判別

  1. TOP
  2. Web関連
  3. JavaScript
  4. JavaScriptでuseragentを取得しviewportの設定やブラウザ判別
2018/05/01
Category :
  1. JavaScript
Tags :
  1. まとめ
  2. レスポンシブ

レスポンシブ対応サイト作成時にJavaScriptでuseragentを取得して出来る事の自分なりのまとめ。
サイト仕様にもよりますが大体下記のような感じ。

  1. viewportの設定
  2. 各ブラウザ毎のCSSの微調節
ブラウザ判別する
目次
  1. HTML
  2. JavaScript
  3. よく対応するCSS微調節
    1. ie11は’游ゴシック体’ではなく’メイリオ’に
    2. windowsのchromeは’游ゴシック体’時、font-weight: 500;に

HTML

head内にua.check.js（任意）を読み込むのみ。
viewportの設定の記述と他のjsファイルからでも扱えるグルーバル変数uaObjがあるのでua.check.jsだけhead内で読み込む。
その他のjsファイルは</body>出来るだけ直前に読み込む。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name="keywords" content="キーワード">
    <meta name="description" content="デスクプリション">
    <link rel="alternate" type="application/rss+xml" href=""><!-- ブログ更新情報などで必要であれば -->
    <link rel="stylesheet" href="./assets/css/style.css"><!-- 各サイト仕様により読み込むCSSファイル -->
    <link rel="stylesheet" href="./assets/css/global.css">
    <link rel="stylesheet" href="./assets/css/module.css">
    <script src="./assets/js/ua.check.js"></script><!-- この位置で読み込んでいたら問題なし -->
    <!-- og設定が必要なら挿入-->
    <meta name="twitter:card" content="">
    <meta name="twitter:site" content="">
    <meta property="og:description" content="">
    <meta property="og:site_name" content="">
    <meta property="og:title" content="">
    <meta property="og:url" content="">
    <meta property="og:type" content="article">
    <meta property="og:locale" content="ja_JP">
    <meta property="og:image" content="">
    <!-- og設定が必要なら挿入-->
    <meta name="author" content="">
    <meta name="format-detection" content="telephone=no"><!-- スマートフォン等で電話番号の自動リンクを制御するため -->
    <link rel="shortcut icon" href="/favicon.ico">
    </script>
</head>

JavaScript

ua.check.js（任意）の中身。
サイト仕様により不必要な箇所もありますがファイル容量的にコピペで流用していて問題なし。
下記がポイント。

  1. どのファイルでも扱えるように外側で変数宣言して
    var uaObj = {};
    グローバル変数とする（1行目）
  2. deviceNameでPC（パソコン）/SP（スマホ）/TAB（タブレット）を判別
  3. agentNameでiphone/ipod/ipad/android/を判別（スマホ・タブレット時）
  4. browserNameでie6〜11/edge/chrome/safari/opera/firefoxを判別（PC時）

var uaObj = {}; //どこからでも取得できるようにグローバル扱い

(function() {

    var ua = window.navigator.userAgent.toLowerCase();

    uaObj.agentName = '';
    uaObj.deviceName = '';
    uaObj.iosVer;

    if (ua.indexOf('iphone') > 0 || ua.indexOf('ipod') > 0 || ua.indexOf('android') > 0 && ua.indexOf('mobile') > 0) {

        /*
        スマホ
        **********************/

        uaObj.deviceName = "SP";

        document.write('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">');

        if (ua.search(/iphone/) != -1) {

            uaObj.agentName = "iphone";

            //ios系　ver対応必要な場合記述
            if (ua.search(/11/) != -1) uaObj.iosVer = 11;
            if (ua.search(/10/) != -1) uaObj.iosVer = 10;
            if (ua.search(/9/) != -1) uaObj.iosVer = 9;

        } else if (ua.search(/ipod/) != -1) {

            uaObj.agentName = "ipod";

            if (ua.search(/11/) != -1) uaObj.iosVer = 11;
            if (ua.search(/10/) != -1) uaObj.iosVer = 10;
            if (ua.search(/9/) != -1) uaObj.iosVer = 9;

        } else if (ua.search(/android/) != -1) {

            uaObj.agentName = "android";

            //android系　ver対応必要な場合記述
            if (ua.search(/android 4/) != -1) uaObj.agentName = "android4";

        }

    } else if (ua.indexOf('ipad') > 0 || ua.indexOf('android') > 0) {

        /*
        タブレット
        **********************/

        uaObj.deviceName = "TAB";

        document.write('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">'); //タブレットもレスポンシブの場合
        //document.write('<meta name="viewport" content="width=1060">'); タブレットでPCサイトを読み込ませる時

        if (ua.search(/ipad/) != -1) {
            uaObj.agentName = "ipad";

            if (ua.search(/11/) != -1) uaObj.iosVer = 11;
            if (ua.search(/10/) != -1) uaObj.iosVer = 10;
            if (ua.search(/9/) != -1) uaObj.iosVer = 9;

        } else {
            uaObj.agentName = "android";
        }

    } else {

        /*
        PC
        **********************/

        var ver = window.navigator.appVersion.toLowerCase();
        uaObj.browserName = '';
        uaObj.ieFlag = false;
        uaObj.macFlag = false;

        uaObj.deviceName = "PC";

        if (ua.indexOf("msie") != -1) {
            if (ver.indexOf("msie 6.") != -1) {
                uaObj.browserName = 'ie6';
            } else if (ver.indexOf("msie 7.") != -1) {
                uaObj.browserName = 'ie7';
            } else if (ver.indexOf("msie 8.") != -1) {
                uaObj.browserName = 'ie8';
            } else if (ver.indexOf("msie 9.") != -1) {
                uaObj.browserName = 'ie9';
            } else if (ver.indexOf("msie 10.") != -1) {
                uaObj.browserName = 'ie10';
            }
            uaObj.ieFlag = true;
        } else if (ua.indexOf('trident/7') != -1) {
            uaObj.browserName = 'ie11';
            uaObj.ieFlag = true;
        } else if (ua.indexOf('edge') != -1) {
            uaObj.browserName = 'edge';
            uaObj.ieFlag = true;
        } else if (ua.indexOf('chrome') != -1) {
            uaObj.browserName = 'chrome';
        } else if (ua.indexOf('safari') != -1) {
            uaObj.browserName = 'safari';
        } else if (ua.indexOf('opera') != -1) {
            uaObj.browserName = 'opera';
        } else if (ua.indexOf('firefox') != -1) {
            uaObj.browserName = 'firefox';
        }

        var isMac = ((ua.indexOf('mac') > -1) && (ua.indexOf('os') > -1)) && !((ua.indexOf('iphone') > -1) || (ua.indexOf('ipad') > -1) || (ua.indexOf('windows') > -1));

        if (isMac) uaObj.macFlag = true;

    }

})(this);

これで判別は完了ですのでCSS微調節のため各種ブラウザ・機種事に振り分けが必要な場合はjsファイル（グローバル変数なのでどのjsファイルでも）に下記のような感じで必要な処理を追加（bodyにクラスを付加させてCSSで微調節）

  • ※jQueryで記述していますのでjQuery読み込み後の記入となります。
//iphoneの場合
if (uaObj.agentName == 'iphone') $('body').addClass('ua-os-iphone');
//macの場合
if (uaObj.macFlag) $('body').addClass('ua-os-mac');
//タブレットの場合
if (uaObj.deviceName == 'TAB') $('body').addClass('ua-tab');
//ie11の場合
if (uaObj.browserName == 'ie11') $('body').addClass('ua-ie-11');
//windowsのchromeの場合
if (!uaObj.macFlag && uaObj.browserName == 'chrome') $('body').addClass('ua-win-chrome');

よく対応するCSS微調節

游書体(游明朝・游ゴシック)をfont-family指定している時によくhackが必要になる。

ie11は游書体(游明朝・游ゴシック)ではなく’メイリオ’に

なぜかie11では余白？line-heightがおかしくなるので一つ一つ調節していくのは現実的ではないので游書体を指定せずメイリオに。

body.ua-ie-11 {
    font-family: 'メイリオ', 'Yu Gothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', '游ゴシック体', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

windowsのchromeは游書体(游明朝・游ゴシック)時、font-weight: 500;に

なぜかwindowsのchromeのみ文字がかすれ気味になるのでfont-weight: 500;で対応。

body.ua-win-chrome{
    font-weight: 500;
}

隣の席のブラウザ判別で悩んでいる可愛いWeb女子に教えて 君もモテモテだ！

  1. ※ソースの流用、改変は自由ですが自己責任とさせていただきます。
トラックバック URL
https://keprate.com/web/javascript/ua-check/trackback/
Web関連 一覧へ戻る
奇跡的に興味を持たれた方は
是非お問い合わせください。
お問い合わせ
お電話はこちらから050-5899-7800
  • ※電話番号の掛け間違いにお気をつけください。
  • ※女性は業務に一切関係ございません。
PAGE TOP