MJ-WAVE.COM

  1. MJ-WAVE.COM
  2. Web開発
  3. 【Android爆発願】メディアクエリの特性を疑似要素(::after)とJavaScriptで取得するのは危険

【Android爆発願】メディアクエリの特性を疑似要素(::after)とJavaScriptで取得するのは危険

流行りのレスポンシブウェブデザインですが、効率のいい実装方法はないかと日々探しています。今回はjavascriptで条件分岐とかしたい時のおはなし。

こちらの記事(英語)を参考に疑似要素(::after)とcontentプロパティを使って簡単に条件分岐できるやーん!っていうのをやってみたんだけど、これダメだ全然使えません。
いや、使えるんだけどね。考えた人はすげぇ天才!って思うんだけど、何がダメってAndroid(2.3〜4.0.3)がクソすぎた。

参考記事に書いてあるやり方をiPhoneで動くように修正すると以下。

CSS

@media only screen and (max-width: 640px) {
	html::after {
		content: 'x-small';
		display: none;
	}
}

JavaScript

document.defaultView.getComputedStyle(document.documentElement,'::after').getPropertyValue('content');

参考記事だとwindow.getComputedStyle(document.body,’::after’)ってやってるけど、ブラウザによっちゃ動かないので、
document.defaultView.getComputedStyle(document.documentElement,’::after’)ってしてあげましょう。

でも結局Androidで動かないんですよね。
document.defaultView.getComputedStyle(document.documentElement,’::after’)でまず疑似要素(::after)が取得出来ません。
あと致命的なのがgetPropertyValue(‘content’)でcontentプロパティも取得できません。他のプロパティは取得できるんですけどね・・。
getComputedStyle()でもgetPropertyValue()でもAndroidさんはちゃんと動いてくれないので、結局ブラウザの幅を取得する等して条件分岐するしかないですね。

var size = getSize();
function getSize() {
	var windowSize = document.documentElement.clientWidth //ブラウザの表示領域幅を取得
	,		s = 640 	//小サイズ
	,		m = 960		//中サイズ
	,		l = 1200	//大サイズ
	,		str;
	if( windowSize <= s ) str = 'x-small';
	else if( windowSize > s && windowSize <= m ) str = 'small';
	else if( windowSize > m && windowSize <= l ) str = 'medium';
	else if( windowSize > l ) str = 'lerge';
	return str;
}
if(size == 'x-small') {
	...
}
else if ( size == 'medium') {
	...
}

みたいな。
上記みたいな方法だと色々な方法で条件分岐が設定できると思うので、
幅が広いっちゃ広い。

今日はAndroidのおかげで時間をかなり潰してしまいましたorz

RECOMMEND BOOKS 筆者オススメ!! この記事に関連する書籍一覧

JavaScript 第5版

JavaScript 第5版

David Flanagan

JavaScriptをやるなら、必ず読んでおきたいJavaScriptのバイブル的な本。基礎知識から高度な部分まで幅広くカバーしてくれてます。

¥4,410(税込)

JavaScriptパターン ―優れたアプリケーションのための作法

JavaScriptパターン ―優れたアプリケーションのための作法

Stoyan Stefanov

JavaScriptにおける無駄のない効率のいいソースコードや、こんな風に書くのか!的な目からウロコな事がたくさん書いてある本。筆者イチオシ。

¥2,940(税込)

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

谷拓樹

iOSに特化したスマホサイト制作ガイド。実際の内容はAndroidでも使える内容も豊富なので、スマホサイトを制作する上で読んでおいて損はなし。

¥2,310(税込)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

たにぐちまこと

スマートフォンサイト制作における入門本。スマホサイト制作において大事な設計から基本的なマークアップ、応用まで盛り込まれているので入門本として最適な本。

¥2,499(税込)

Comment Form コメントを投稿する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*
次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>