とりあえず書きなぐる

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

ヘッダーフッターも一捻り

jQuery Mobileさん、iosandroid上だとinputにフォーカスが行く度にヘッダーとフッターが隠れます
表示面積を大きく取るためなのでしょうが、うっとおしいです
よくある動作ですが、うっとおしいです
CSSを上書きして捻り潰してくれます
/Src/cm.css

/*
  Mobile Header/Footer
  Auto Slideup/Down Cancel
*/
.ui-header-fixed.ui-fixed-hidden {
  top: -1px;
  padding-top: 1px;
  position: fixed;
}

.ui-footer-fixed.ui-fixed-hidden {
   bottom: -1px;
  padding-bottom: 1px;
  position: fixed;
}

.ui-header-fixed.slidedown.in,
.ui-header-fixed.slidedown.out,
.ui-header-fixed.slidedown.reverse,
.ui-footer-fixed.slideup.in,
.ui-footer-fixed.slideup.out,
.ui-footer-fixed.slideup.reverse {
  -o-animation-name: none;
  -moz-animation-name: none;
  -webkit-animation-name: none;
  animation-name: none;
  -o-transform: none;
  -ms-transform: none;
  -moz-transform: none;
  -webkit-transform: none;
  transform: none;
}

ついでにヘッダにロゴ画像を出して其れっぽい感じにします
/Src/cm.css

/* Header Image */
.ui-header > .ui-title.ui-img-app {
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/Src/app.css

/*
  For Mobile
*/
body:not(.ui-desktop) ul.ui-listview > li.ui-li-divider,
body:not(.ui-desktop) div.ui-header > .ui-title {
  border-color: #d00;
  background-color: #d00;
  color: white;
}

body:not(.ui-desktop) .ui-checkbox-on:after,
body:not(.ui-desktop) .ui-flipswitch-active.ui-flipswitch,
body:not(.ui-desktop) .ui-btn-active {
  border-color: #d00!important;
  background-color: #d00 !important;
  color: white;
}

/*
  For Desktop
*/
body.ui-desktop ul.ui-listview > li.ui-li-divider,
body.ui-desktop div.ui-header > .ui-title
{
  border-color: #0bb;
  background-color: #0bb;
  color: white;
}

body.ui-desktop .ui-checkbox-on:after,
body.ui-desktop .ui-flipswitch-active.ui-flipswitch,
body.ui-desktop .ui-btn-active {
  border-color: #0bb!important;
  background-color: #0bb!important;
  color: white;
}

/*
  Header Title Logo
*/
.ui-header > .ui-title.ui-img-app {
  background-image: url('../imgs/logo.png');
  background-size: auto 5em;  /* image height*/
  height: 5em;                /* image height*/
  padding-left: 18em;         /* image width*/
  border-color: white !important;
  background-color:white !important;
  color: black !important;
}

タイトルになるタグにui-img-appを付加し、app.cssで表示ロゴとサイズを指定します
bodyに付加してui-desktopでデスクトップとモバイルの色を管理します

      <div data-role="header" data-position="fixed" data-fullscreen="false" data-tap-toggle="false">
        <h1 class="ui-img-app ui-title-left">メニュー</h1>

        ....

      </div>


f:id:vzc00525:20190607221511p:plain