こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

widthでcss,js切換可能でしょうか。

【Web製作】widthでcssやjavascriptを切換えたいです。

マルチデバイス対応のWebSiteを製作しようと思うのですが、
widthによって、cssやjavascriptを切り替えたいのですがどのようにすれば良いでしょうか。

横幅が【959px以下】の場合は【style-1.css】と【base1.js】
横幅が【960px以上】の場合は【style-2.css】と【base2.js】を適応させたいです。

htmlに
<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)">
<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)">
<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)">
<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) ">
<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) ">
と記述してもうまく動作しません。(確認は【PC】【iPhone】【iPad】です。)


私の解釈ですと、
1.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)">
↑PCの場合、ウィンドウサイズが959px以下の場合【style-1.css】

2.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)">
↑PCの場合、ウィンドウサイズが960px以上の場合【style-2.css】

3.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)">
↑PC以外で、画面表示サイズが最大959px以下のデバイスの場合【style-1.css】

4.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) ">
↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのポートレートモードの場合【style-1.css】

5.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) ">
↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのランドスケープモードの場合【style-2.css】

と、解釈し指定しているのですがうまく動作しません。


そしてもう一つなのですが、
widthやポートレートモード、ランドスケープモードを判別しjsを切り替える事は可能でしょうか。

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

投稿日時 - 2012-02-21 13:53:39

QNo.7318421

困ってます

質問者が選んだベストアンサー

viewportでwidth=media-widthを指定しておけば、<link>タグのmedia属性で切り替えられるかもしれませんが、未検証です。
https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

----------
JavaScriptでポートレート、ランドスケープを判断するには、

if( window.orientation%180 ){
//ランドスケープ
}else {
//ポートレート
}

です。


window.onorientationchange=function(){};

で、切り替わった時に実行する処理を指定できます。

JavaScriptを併用して良いのなら、
disabledを切り替えればスタイルの変更が簡単にできると思います。

投稿日時 - 2012-02-21 14:46:00

補足

talooさんのヒントを得て
下記の記述で
【PCのwindowサイズ変更時とマルチデバイスで向き変更時にjsとcssを切替】
ができました。
プログラムは苦手なので記述が悪いと思いますが、動きました!
ありがとうございました!

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>PCのwindowサイズ変更時とマルチデバイスで向き変更時にjsとcssを切替</title>
<meta name="viewport" content="" id="myStyleTwo">
<link rel="stylesheet" href="style-1.css" id="myStyle">
<script type="text/javascript" src="../../jquery/jquery-1.7.1.js"></script>
<script>
$(function(){
$(window).bind("orientationchange resize load",function(){
if( 960 >$(window).width() || Math.abs(window.orientation) === 0){
$("#myStyle").attr("href","style-1.css");//縦向きの場合の命令
$("#testA").html("縦"+$(window).width());//縦向きの場合の命令
document.getElementById('myStyleTwo').content = "width = 600,initial-scale=1";
}else if(Math.abs(window.orientation) === 90){
$("#myStyle").attr("href","style-2.css");//横向きの場合の命令
$("#testA").html("横"+$(window).width());//横向きの場合の命令
document.getElementById('myStyleTwo').content = "width = 1000,initial-scale=1";
}else{
$("#myStyle").attr("href","style-2.css");//横向きの場合の命令
$("#testA").html("横"+$(window).width());//横向きの場合の命令
document.getElementById('myStyleTwo').content = "width = 1000,initial-scale=1";
}
})
})
</script>
</head>
<body>

<div id="testA">BOXA</div>

</body>
</html>

投稿日時 - 2012-02-22 16:36:34

お礼

お礼を補足に書いてしまいました。。。
ありがとうございました!

投稿日時 - 2012-02-22 16:39:10

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

No.1です。
すみません、訂正です。

× width=media-width
○ width=device-width

投稿日時 - 2012-02-21 15:12:30

補足

今、【width=media-width】を調べていました!
迅速に対応いただき本当にありがとうございます!
教えて頂いたソースで、ただいま、試行錯誤しております!
また後ほど、コメントを書かせて頂きます!

投稿日時 - 2012-02-21 16:17:55

お礼

width=device-width を
教えていただき、
ありがとうございました!

投稿日時 - 2012-02-22 16:43:31

あなたにオススメの質問