iPhone/iPod Touch/iPad 縦と横とでcssを切り替える

iPod Touch4

外部のスタイルシートを使わない場合

<style type="text/css">
@media screen and (orientation:portrait) {
  h1 { color:red; }
  body {
    line-height:1.8;
    font-size:120%;
  }
}
@media screen and (orientation:landscape) {
  h1 { color:green; }
  body {
    line-height:1.8;
  }
}

</style>

外部のスタイルシートを使う場合

<head>
  <link href="default.css" rel="stylesheet" type="text/css" media="screen and (orientation:portrait)">
  <link href="iphone.css" rel="stylesheet" type= "text/css" media="only screen and (orientation:landscape)">
  <!--[if IE]>
  <link href="default.css" rel="stylesheet" type="text/css">
  <![endif]-->
</head>

PCとiPhoneの縦と横の３つを分ける

<style type="text/css">
@media screen {
  h1 { color:green; }
  body {
    line-height:1.8;
    font-size:120%;
  }
}
@media only screen and (max-device-width:480px) and (orientation:portrait) {
  h1 { color:blue; }
}
@media only screen and (max-device-width:480px) and (orientation:landscape) {
  h1 { color:red; }
}

</style>
フォーム要素の値を返す
  // フォーム要素の値を返す
  // alert (getValue.call (form, 'name0'));
  var getValue = (function (value) {
    return function (name) {
      var e = ('FORM' === this.nodeName)
              ? this.elements[name]:
              document.getElementsByName (name);

      return (e)
        ? (1 === e.length || 'SELECT' === e.nodeName)
          ? value (e)
          : Array.map (e, value)
        : null;
    };
  })((function (selectedValue) {
    return function (e) {
      var r;
      var f;

      if (! e)
        return null;
      
      switch (e.nodeName) {
      case 'INPUT' : case 'SELECT' : case 'TEXTAREA' :
        switch (e.type) {
        case 'radio': case 'checkbox':
          return (e.checked) ? e.value: null;
        
        case 'select-one':
          f = true;
        case 'select-multiple':
          r = Array.reduce (e.options, selectedValue, []);
          return f ? r[0]: r;
          
        default:
          return e.value;
        }

      default :
        return null;
      }
    };
  })(function (a, e) { return (e.selected && a.push (e.value), a); }));