JavaScriptで画面サイズによって表示非表示

質問

CSSメディアクエリでdisplay:noneが使えないケースで質問させてください。

・JavaScriptでアクセス元の画面サイズを取得し、
・CSSメディアクエリのように900px以下なら<img src="1.jpg">を非表示、
・900px以上なら<img src="1.jpg">を表示、

のようにHTMLタグをコントロールしたいです。

JavaSctiptはdocument write()位しかわかりません。
どなたかご存知の方がいらっしゃったら教えて頂けませんでしょうか。

よろしくお願いいたします。

回答No.2

balloon23 · ベストアンサー

前にどこかのサイトで書かれていたものの受け売りですが。。。

//　ここから　
var w = window.innerWidth;
var x = 900;
if( w <= x) {
viewtype = 'sp';
} else {
viewtype = 'pc';
}
//　ここまで

あとは目的の場所に書き込めばOKだと思います。
たぶん。

お礼

ありがとうございました。教えて頂いたものを下のようにして実現することができました。

<script>
var w = window.innerWidth;
var x = 900;
if( w <= x) {
document.write("<img src="1.jpg">");
} else {
document.write("");
}
</script>

間違っているのかもしれませんが・・・(^_^;)
とても助かりました！

回答No.1

ORUKA1951

＞CSSメディアクエリでdisplay:noneが使えないケースで質問させてください。
　はなぜ？？
　小さなディスプレイとなると、スマホかフィーチャーホン、スマホはすべてmediaquery使えるでしょうし、フィーチャーホンでしたらmedia="handheld"が使えるはずですけど。

補足

ご質問ありがとうございます。
理由は、display:noneで表示をコントロールすることが制限されているコードを記述するためです。
（1ページのHTMLあたりの記述回数に制限があるコードで、こちらでは簡易的にimgタグを例としました）
宜しくお願い申し上げます。