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

2012/02/21 13:53

このQ&Aのポイント

マルチデバイス対応のWebSiteを製作しようと思うのですが、widthによって、cssやjavascriptを切り替えたいのですがどのようにすれば良いでしょうか。
HTMLの<link>タグの中で、ウィンドウサイズやデバイスの幅、画面の向きに応じて切り替えるCSSとJavaScriptを指定する方法がありますが、うまく動作しないようです。
さらに、widthやポートレートモード、ランドスケープモードを判別しJavaScriptを切り替えることも可能かどうかを知りたいです。

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を切り替える事は可能でしょうか。よろしくお願いいたします。

hk-c
お礼率95% (21/22)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/02/21 14:46 回答No.1

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/22 16:39

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

質問者

補足 2012/02/22 16:36

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>