【Web製作】widthでcssやjavascriptを切換えたいです。マルチデバイス対応のWebSiteを製作しようと思うのですが、 widthによって、cssやjavascriptを切り替えたいのですがどのようにすれば良いでしょうか。横幅が【959px以下】の場合は【style-1.css】と【base1.js】横幅が【960px以上】の場合は【style-2.css】と【base2.js】を適応させたいです。 htmlにと記述してもうまく動作しません。(確認は【PC】【iPhone】【iPad】です。) 私の解釈ですと、 1. ↑PCの場合、ウィンドウサイズが959px以下の場合【style-1.css】 2. ↑PCの場合、ウィンドウサイズが960px以上の場合【style-2.css】 3. ↑PC以外で、画面表示サイズが最大959px以下のデバイスの場合【style-1.css】 4. ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのポートレートモードの場合【style-1.css】 5. ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのランドスケープモードの場合【style-2.css】と、解釈し指定しているのですがうまく動作しません。そしてもう一つなのですが、 widthやポートレートモード、ランドスケープモードを判別しjsを切り替える事は可能でしょうか。よろしくお願いいたします。

viewportでwidth=media-widthを指定しておけば、タグの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を切り替えればスタイルの変更が簡単にできると思います。

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

解決済

質問者：hk-c
質問日時：2012/02/21 13:53
回答数：2件

【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を切り替える事は可能でしょうか。

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： taloo
回答日時：2012/02/21 14:46

viewportでwidth=media-widthを指定しておけば、<link>タグのmedia属性で切り替えられるかもしれませんが、未検証です。

https://developer.apple.com/library/safari/#docu …

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

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

です。

window.onorientationchange=function(){};

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

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

この回答への補足

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>