とりあえず書きなぐる

とりあえず、マイノリティーなプログラムを極力説明せずに書きなぐります

デスクトップなjQuery Mobile

実際にページを作ってみます
ポチッとな
f:id:vzc00525:20190502142000p:plain
/Home/Index.vbhtml

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta charset="utf-8" />

  <link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.4.5.min.css")" />
  <link rel="stylesheet" href="@Url.Content("~/Src/cm.css")" />
  <link rel="stylesheet" href="@Url.Content("~/Src/app.css")" />

  <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script>
  <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.mobile-1.4.5.min.js")"></script>

  <style type="text/css">
    .menu {
      width: 20em;
      float: left;
      margin-left: 1em!important;
    }

    ul.ui-listview > li.ui-li-divider,
    div.ui-header > .ui-title {
      border-color: blue;
      background-color: blue;
      color: white;
    }

    .ui-flipswitch-active.ui-flipswitch,   
    .ui-btn-active {
      border-color: blue !important;
      background-color: blue !important;
    }

    #page1 > .ui-header > .ui-title {
      padding-right: 10.5em;
    }

  </style>

</head>
<body class="ui-nodisc-icon ui-alt-icon ui-desktop">
  <div data-role="page" id="page1">
    <div data-role="header" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <h1 class="ui-icon ui-icon-home-w ui-title-left">HeaderHeaderHeaderHeaderHeaderHeader</h1>
      <div class="ui-right-panel">
        <a href="#page2" class="ui-btn">ダイアログページ</a>
        <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-delete"></a>
      </div>
      <div class="ui-toolbar">
        <div class="ui-left-panel">
          <div class="ui-toolbar-divider">
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-star">star</a>
            <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-star"></a>
            <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-alert"></a>
          </div>
        </div>
        <div class="ui-right-panel">
          <div class="ui-toolbar-divider">
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-action ui-btn-active">Active</a>
            <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-gear"></a>
          </div>
          <div class="ui-toolbar-divider">
            <a href="#" class="ui-btn">ボタン</a>
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-search">Search</a>
            <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-search"></a>
          </div>
          <div class="ui-toolbar-divider">
            <a href="#" class="ui-btn ui-btn-icon-left ui-icon-edit">Edit</a>
            <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-edit"></a>
          </div>
        </div>
      </div>
    </div>
    <div role="main" class="ui-content">
      <ul data-role="listview" data-inset="true" data-icon="false" class="menu">
        <li data-role="list-divider">Menu1</li>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
      </ul>
      <ul data-role="listview" data-inset="true" data-icon="false" class="menu">
        <li data-role="list-divider">Menu2</li>
        <li><a href="#">AA</a></li>
        <li><a href="#">BB</a></li>
        <li><a href="#">CC</a></li>
        <li><a href="#">DD</a></li>
        <li><a href="#">EE</a></li>
        <li><a href="#">FF</a></li>
        <li><a href="#">GG</a></li>
        <li><a href="#">HH</a></li>
        <li><a href="#">II</a></li>
        <li><a href="#">JJ</a></li>
        <li><a href="#">KK</a></li>
      </ul>
      <ul data-role="listview" data-inset="true" data-icon="false" class="menu">
        <li data-role="list-divider">Menu3</li>
        <li><a href="#">AAA</a></li>
        <li><a href="#">BBB</a></li>
      </ul>
    </div>
    <div data-role="footer" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <div class="ui-toolbar">
        <div class="ui-left-panel">
          <a href="#" class="ui-btn">ボタン3</a>
        </div>

        <div class="ui-right-panel">
          <a href="#" class="ui-btn ui-btn-active">OK</a>
          <a href="#" class="ui-btn">キャンセル</a>
        </div>
      </div>
    </div>
  </div>

  <div data-role="page" id="page2">
    <div data-role="header" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <h1>Dialog</h1>
      <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-video">ボタン1</a>
    </div>

    <div role="main" class="ui-content ui-form">
      <ul data-role="listview" data-inset="true" data-icon="false" class="split">
        <li>
          <div class="ui-field-contain em7">
            <label for="text-12">Text input:</label>
            <div>
              <input name="text-12" id="text-12" type="text" value="">
            </div>
          </div>
          <button class="ui-btn ui-btn-icon-notext ui-btn-split ui-icon-carat-d"></button>
        </li>
        <li>
          <div class="ui-field-contain em7">
            <label for="text-13">Text input clr:</label>
            <div>
              <input name="text-13" id="text-13" type="text" value="" data-clear-btn="true">
            </div>
          </div>
        </li>
        <li>
          <div class="ui-field-contain em7">
            <label for="search-8">Search:</label>
            <div>
              <input name="search-8" id="search-8" type="search" value="">
            </div>
          </div>
        </li>
        <li>
          <div class="ui-field-contain em7">
            <label for="textarea-12">Textarea:</label>
            <div>
              <textarea name="textarea-12" id="textarea-12" rows="8" cols="40"></textarea>
            </div>
          </div>
          <button class="ui-btn ui-btn-icon-notext ui-btn-split ui-icon-delete"></button>
        </li>
        <li>
          <div class="ui-field-contain em7">
            <label for="Switch">Textarea:</label>
            <div>
              <input name="flip-checkbox-1" id="flip-checkbox-1" type="checkbox" data-role="flipswitch">
            </div>
          </div>
        </li>

      </ul>
    </div>

    <div data-role="footer" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <div class="ui-toolbar">
        <div class="ui-left-panel">
          <a href="#" class="ui-btn">リセット</a>
        </div>
        <div class="ui-right-panel">
          <a href="#" class="ui-btn ui-btn-active">OK</a>
          <a href="#page1" class="ui-btn">キャンセル</a>
        </div>
      </div>
    </div>

  </div>
</body>
</html>

/Mobile/Index.vbhtml

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta charset="utf-8" />

  <link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.4.5.min.css")" />
  <link rel="stylesheet" href="@Url.Content("~/Src/cm.css")" />
  <link rel="stylesheet" href="@Url.Content("~/Src/app.css")" />

  <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script>
  <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.mobile-1.4.5.min.js")"></script>

  <style type="text/css">
    .ui-header > .ui-title {
      background-color: Red;
      color: white;
      text-shadow: none;
    }

    .ui-btn-active{
      background-color: Red !important;
      text-shadow:none !important;
    }

  </style>

</head>
<body class="ui-nodisc-icon ui-alt-icon">

  <div data-role="page" id="page1">

    <div data-role="header" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <h1>Header</h1>
      <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-carat-l ui-btn-left"></a>
      <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-carat-r ui-btn-right"></a>
      <div class="ui-toolbar">
        <div class="ui-left-panel">
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-star"></a>
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-gear"></a>
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-search"></a>
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-edit"></a>
        </div>
        <div class="ui-right-panel">
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-bullets"></a>
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-camera"></a>
        </div>
      </div>
      <div data-role="navbar">
        <a href="#" class="ui-btn ui-btn-active">ホーム</a>
        <a href="#">設定</a>
        <a href="#">ヘルプ</a>
        <a href="#">問い合わせ</a>
      </div>
    </div>

    <div role="main" class="ui-content">
      <ul data-role="listview" data-icon="false">
        <li>
          <a href="#">
            <img src=@Url.Content("~/imgs/album-bb.jpg")>
            <h2>Broken Bells</h2>
            <p>Broken Bells</p>
          </a>
        </li>
        <li>
          <img src=@Url.Content("~/imgs/album-hc.jpg")>
          <h2>Warning</h2>
          <p>Hot Chip</p>
        </li>
        <li>
          <a href="#">
            <img src=@Url.Content("~/imgs/album-p.jpg")>
            <h2>Wolfgang Amadeus Phoenix</h2>
            <p>Phoenix</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src=@Url.Content("~/imgs/album-bb.jpg")>
            <h2>Broken Bells</h2>
            <p>Broken Bells</p>
          </a>
        </li>
        <li>
          <img src=@Url.Content("~/imgs/album-hc.jpg")>
          <h2>Warning</h2>
          <p>Hot Chip</p>
        </li>
        <li>
          <a href="#">
            <img src=@Url.Content("~/imgs/album-p.jpg")>
            <h2>Wolfgang Amadeus Phoenix</h2>
            <p>Phoenix</p>
          </a>
        </li>
      </ul>

    </div>

    <div data-role="footer" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
      <div class="ui-toolbar">
        <div class="ui-left-panel">
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-star"></a>
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-gear"></a>
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-search"></a>
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-edit"></a>
        </div>
        <div class="ui-right-panel">
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-bullets"></a>
          <a href="#" class="ui-btn ui-btn-icon-notext ui-icon-camera"></a>
        </div>
      </div>
      <div data-role="navbar">
        <a href="#" class="ui-btn ui-btn-active">ホーム</a>
        <a href="#">設定</a>
        <a href="#">ヘルプ</a>
        <a href="#">問い合わせ</a>
      </div>
    </div>

  </div>
</body>
</html>

/Src/app.css

/* 
  Icon 
  From: http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/builder/
*/
.ui-icon-home-w:after {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%20Tiny%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11-tiny.dtd%22%3E%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20500%20500%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20d%3D%22M392.857%20276.786v133.929q0%207.254-5.301%2012.556t-12.556%205.301h-107.143v-107.143h-71.429v107.143h-107.143q-7.254%200-12.556-5.301t-5.301-12.556v-133.929q0-0.279%200.14-0.837t0.14-0.837l160.435-132.254%20160.435%20132.254q0.279%200.558%200.279%201.674zM455.078%20257.534l-17.299%2020.647q-2.232%202.511-5.859%203.069h-0.837q-3.627%200-5.859-1.953l-193.081-160.993-193.081%20160.993q-3.348%202.232-6.696%201.953-3.627-0.558-5.859-3.069l-17.299-20.647q-2.232-2.79-1.953-6.557t3.069-5.999l200.614-167.132q8.929-7.254%2021.206-7.254t21.206%207.254l68.081%2056.919v-54.409q0-3.906%202.511-6.417t6.417-2.511h53.571q3.906%200%206.417%202.511t2.511%206.417v113.839l61.105%2050.781q2.79%202.232%203.069%205.999t-1.953%206.557z%22%20fill%3D%22%23ffffff%22%20%2F%3E%3C%2Fsvg%3E');
  background-size: 20px;
  border-radius: 0;
}

.ui-icon-home-b:after {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%20Tiny%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11-tiny.dtd%22%3E%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20500%20500%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20d%3D%22M392.857%20276.786v133.929q0%207.254-5.301%2012.556t-12.556%205.301h-107.143v-107.143h-71.429v107.143h-107.143q-7.254%200-12.556-5.301t-5.301-12.556v-133.929q0-0.279%200.14-0.837t0.14-0.837l160.435-132.254%20160.435%20132.254q0.279%200.558%200.279%201.674zM455.078%20257.534l-17.299%2020.647q-2.232%202.511-5.859%203.069h-0.837q-3.627%200-5.859-1.953l-193.081-160.993-193.081%20160.993q-3.348%202.232-6.696%201.953-3.627-0.558-5.859-3.069l-17.299-20.647q-2.232-2.79-1.953-6.557t3.069-5.999l200.614-167.132q8.929-7.254%2021.206-7.254t21.206%207.254l68.081%2056.919v-54.409q0-3.906%202.511-6.417t6.417-2.511h53.571q3.906%200%206.417%202.511t2.511%206.417v113.839l61.105%2050.781q2.79%202.232%203.069%205.999t-1.953%206.557z%22%20fill%3D%22%23000000%22%20%2F%3E%3C%2Fsvg%3E');
  background-size: 20px;
  border-radius: 0;
}

/* 
  buildin icon 
*/
.ui-icon-alert:after,
.ui-icon-action:after,
.ui-icon-audio:after,
.ui-icon-back:after,
.ui-icon-bars:after,
.ui-icon-bullets:after,
.ui-icon-calendar:after,
.ui-icon-camera:after,
.ui-icon-edit:after,
.ui-icon-search:after,
.ui-icon-gear:after,
.ui-icon-star:after {
  background-size: 18px;
  border-radius: 0;
}
.ui-icon-action:after {
  background-position-y: 0;
}
.ui-icon-alert:after {
  background-size: 20px;
  background-position-y: 3px;
}

cm.css

.ui-corner-all {
  border-radius: 0 !important;
}

.ui-panel,
.ui-header,
.ui-footer,
.ui-btn:active,
.ui-overlay-shadow,
.ui-shadow,
.ui-shadow-inset,
input:focus {
  box-shadow: none !important;
}

.ui-focus {
  box-shadow: none !important;
  /*box-shadow: 0 0 0 3px rgba(0,0,0,0.50) !important;*/
}
.ui-btn:focus:not(.ui-flipswitch-on) {
  box-shadow: none !important;
  /*box-shadow: 0 0 0 3px rgba(0,0,0,0.50) inset !important;*/
}

.ui-flipswitch-on.ui-btn:focus {
  box-shadow: none !important;
  /*box-shadow: 0 0 0  3px rgba(0,0,0,0.50) inset !important;*/
}

/*
  ThemeA BaseColor White
*/
.ui-page-theme-a .ui-btn:not(.ui-btn-active),
.ui-page-theme-a .ui-bar-inherit:not(.ui-flipswitch-active):not(.ui-li-divider),
.ui-page-theme-a {
  background-color: #fff;
}
  .ui-page-theme-a .ui-btn:not(.ui-btn-active):hover {
    background-color: #f6f6f6;
  }

/* 
  blank icon 
*/
.ui-icon-none:after {
  background-image: none;
  background-color: transparent;
  border-radius: 0;
  padding: 1px;
}

/* Box Icon */
.ui-icon {
  position: relative;
  padding-left: 2em !important;
}

  .ui-icon:after {
    background-color: transparent;
    position: absolute;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    width: 2em;
    height: 2em;
    left: 0;
    top: 50%;
    margin-top: -1em;
}

/*
  Title
*/
.ui-header .ui-title {
  margin: 0;
  padding-left: 2.5em;
  padding-right: 2.5em;
  text-shadow: none;
}

  .ui-header .ui-title.ui-title-left {
      padding-left: 0.3em;
      text-align:left;
  }

/*
  Button
*/

.ui-page .ui-btn {
  font-weight: 400;
}

  .ui-page .ui-btn.ui-btn-icon-notext:not(.ui-input-clear) {
    font-size: 12.5px;
    padding: 0.48em;
  }
  .ui-page .ui-btn.ui-btn-icon-notext.min:not(.ui-input-clear) {
    padding: 0;
  }

  .ui-page .ui-btn:not(.ui-flipswitch-on):not(.ui-checkbox-on):not(.ui-checkbox-off):active {  
    -o-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }

.ui-page .ui-flipswitch-active.ui-flipswitch,
.ui-page .ui-btn-active {
  text-shadow: none !important;
}

.ui-btn.ui-btn-underline{
  background: linear-gradient(transparent 90%, rgb(0,0,0) 10% );
}

/* ChekcBox */
.ui-checkbox > label {
  border-width: 0;
}

/* Herder/Footer Button*/
.ui-header .ui-btn,
.ui-footer .ui-btn {
  margin: 0;
  border-width: 0;
}

  .ui-header .ui-btn:not(.ui-btn-icon-notext),
  .ui-footer .ui-btn:not(.ui-btn-icon-notext) {
    min-width: 5em;
  }

  .ui-header .ui-btn.ui-btn-icon-left,
  .ui-header .ui-btn.ui-btn-icon-right,
  .ui-footer .ui-btn.ui-btn-icon-left,
  .ui-footer .ui-btn.ui-btn-icon-right {
    min-width: 3em;
  }

/* Header Button */
.ui-header > .ui-btn.ui-btn-left,
.ui-header > .ui-btn.ui-btn-right,
.ui-header > .ui-left-panel,
.ui-header > .ui-right-panel {
  position: absolute;
  top: 0.4em;
}

.ui-header > .ui-left-panel,
.ui-header > .ui-right-panel {
  white-space: nowrap;
  font-size: 12.5px;
}




.ui-header > .ui-btn.ui-btn-left,
.ui-header > .ui-left-panel {
  left: 0.4em;
}

.ui-header > .ui-btn.ui-btn-right,
.ui-header > .ui-right-panel {
  right: 0.4em;
}

/*
  Toolbar
*/
.ui-toolbar{
  clear: both;
}

  /* Toolbar Divider*/
  .ui-toolbar .ui-toolbar-divider {
    display: inline-block;
    height: 100%;
    border-left: 1px solid #ccc;
    padding-left: 1px;
  }

  /* Toolbar LeftPanel/RightPanel */
  .ui-toolbar > .ui-left-panel,
  .ui-toolbar > .ui-right-panel {
    margin: 0.3em;
  }

  .ui-toolbar > .ui-left-panel {
    float: left;
  }

  .ui-toolbar > .ui-right-panel {
    float: right;
  }

/* 
  content
*/
.ui-content.ui-nopadding {
  padding: 0;
}

.ui-content .ui-listview-inset {
  margin: 0;
}

/* 
  Form 
*/
.ui-toolbar.ui-form,
.ui-content.ui-form {
  max-width: 800px;
  margin: 0 auto;
}

.ui-content.ui-form > ul.ui-listview{
  margin: 0;
}

/*
  Field Contain Fix
*/
.ui-field-contain-fix > label {
  float: left;
  margin-top: 0.5em;
}

.ui-field-contain-fix.em3 > label {
  width: 3em;
}
.ui-field-contain-fix.em5 > label {
  width: 5em;
}
.ui-field-contain-fix.em7 > label {
  width: 7em;
}
.ui-field-contain-fix.em9 > label {
  width: 9em;
}

.ui-field-contain-fix > label + div {
  margin-top: -0.5em;
  margin-bottom: -0.5em;
}

.ui-field-contain-fix.em3 > label + div {
  padding-left: 3em;
}
.ui-field-contain-fix.em5 > label + div {
  padding-left: 5em;
}
.ui-field-contain-fix.em7 > label + div {
  padding-left: 7em;
}
.ui-field-contain-fix.em9 > label + div {
  padding-left: 9em;
}

/*
  Field Contain
*/
.ui-field-contain {
  border-bottom-width: 0;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  margin: 0;
}

.ui-field-contain .ui-flipswitch{
  margin-top: 0.2em;
}

/* Field Contain 28em Over */
@media (min-width: 28em) {

  .ui-field-contain.em3 .ui-flipswitch,
  .ui-field-contain.em5 .ui-flipswitch,
  .ui-field-contain.em7 .ui-flipswitch,
  .ui-field-contain.em9 .ui-flipswitch {
    margin-top: 0.7em;
  }

  .ui-field-contain.em3 > label,
  .ui-field-contain.em5 > label,
  .ui-field-contain.em7 > label,
  .ui-field-contain.em9 > label {
    float: left !important;
    margin-right: 0 !important;
    margin-top: 0.5em !important;
  }

  .ui-field-contain.em3 > label {
    width: 3em !important;
  }

  .ui-field-contain.em5 > label {
    width: 5em !important;
  }

  .ui-field-contain.em7 > label {
    width: 7em !important;
  }

  .ui-field-contain.em9 > label {
    width: 9em !important;
  }

    .ui-field-contain.em3 > label + div,
    .ui-field-contain.em5 > label + div,
    .ui-field-contain.em7 > label + div,
    .ui-field-contain.em9 > label + div {
      width: 100% !important;
      margin-top: -0.5em !important;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

  .ui-field-contain.em3 > label + div {
    padding-left: 3em !important;
  }

  .ui-field-contain.em5 > label + div {
    padding-left: 5em !important;
  }

  .ui-field-contain.em7 > label + div {
    padding-left: 7em !important;
  }

  .ui-field-contain.em9 > label + div {
    margin-left: 9em !important;
    padding-right: 9em !important;
  }
}

/*
  Navbar
*/
.ui-navbar {
  clear: both;
  padding: 1px;
}

  .ui-navbar > .ui-btn {
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: -0.35em;
    width: 25%;
  }

@media (max-width: 28em) {
  .ui-navbar > .ui-btn {
    width: 50%;
  }
}

.ui-page .ui-header > .ui-navbar > .ui-btn,
.ui-page .ui-footer > .ui-navbar > .ui-btn {
  border-width: 0;
}

/*
  Listview
*/
ul.ui-listview{
  padding-right: 1px;
  padding-bottom: 1px;
}

  /* Listvew Split Button */
  ul.ui-listview.split > li > a,
  ul.ui-listview.split > li.ui-li-static {
    padding-right: 3em;  
  }

  ul.ui-listview.split .ui-btn.ui-btn-split {
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 3em;
    height: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 1px;
    border-radius: 0;
    border-width: 0 0 0 1px;
    padding: 0.3em;
  }


/* Listview Thumb */
.ui-content ul.ui-listview:not(.ui-listview-inset) > li:first-child > a {
  border-top-width : 0;
}

ul.ui-listview > .ui-li-has-thumb > .ui-btn,
ul.ui-listview > .ui-li-has-thumb.ui-li-static {
  padding-left: 10em;
  min-height: 8em;
}

  ul.ui-listview > .ui-li-has-thumb > .ui-btn > img:first-child,
  ul.ui-listview > .ui-li-has-thumb.ui-li-static > img:first-child {
    max-width: 8em;
    max-height: 8em;
    left: 5em;        /* parent padding-left/2 */
    top: 4.7em;       /* (max-widht + parent padding-top&bottom)/2 */
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%,-50%);
  }

ul.ui-listview > li.ui-li-divider{
  text-shadow: none;
}

/*
  Flipswitch
*/
.ui-page div.ui-flipswitch{
  font-weight: 400;
}

/*
  Input
*/
.ui-input-has-clear > input {
  border-right: 1px solid #ddd;
}

コントローラーを追加します
/Controllers/HomeController.vb
/Controllers/MobileController.vb

Public Class HomeController
    Inherits System.Web.Mvc.Controller

    '
    ' GET: /Home

    Function Index() As ActionResult
        Return View()
    End Function

End Class

Public Class MobileController
    Inherits System.Web.Mvc.Controller

    '
    ' GET: /Mobile

    Function Index() As ActionResult
        Return View()
    End Function

End Class

URLは/Home/Index.htmlと/Mobile/Index.htmlになります