今更ながらmeta viewport問題。 - みやのまるがゆく。

<meta name="viewport" content="width=1024px">

久しぶりにこの設定みたな、と思ったら
この子のおかげでメディアクエリが使えなくなるアクシデントに遭遇。



<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

最近はこんな設定ばっかり使ってたからすっかり忘れてたけど、
デバイスの幅を「1024px」と認識させちゃう状態だものね、あたりまえよね・・・

この状態で、レスポンシブ対応が必要な場合はユーザーエージェント情報で判別するのが無難。（jquery使用）

if (/iphone|Android.+Mobile/.test(ua) && 'ontouchend' in document) {

   //スマホでアクセスした場合は、bodyに isSPクラスを追加

　　$('body').addClass('isSp');

}

ipad、とか条件に入れればタブレットも判別できますよ。

コーディングしたあとに何かしら組み込まれることが多いので、JSでは基本的にクラスの着脱しか設定しません。
見た目の変化はなるべくCSSにまとめて記載します。
どこの現場もそうなのかしら・・・？