D+S Tech Labs - Code Lab

web mobile template

make your web app
look like a native mobile app

▶

A few things are necessary for your web app running in a browser to look like a native Android or iOS app.

Go fullscreen to remove the browser window stuff:
(title bar, menu bar, bookmark toolbar, status bar, etc.)
Disable the browser's normal right-click context menu
Include fixed title and navigation bars
Customized scrollbars
Include a function for a drop-down settings menu
Include functions for popups such as "Toast" and "Snackbar"

This template starts off with a splash screen that has a button to go to full screen. The splash button is required since Chrome won't go to full screen without user interaction.

Each of your app screens are separate HTML files.
This sample has three navigation sections (screens).

HTML-index:

<!doctype html>
<!--=======================================================
//
//     FILE : index.html
//
//  PROJECT : Mobile Web App Template
//
//   AUTHOR : Bill Daniels
//            Copyright 2023-2024, D+S Tech Labs, Inc.
//            MIT License
//
//======================================================-->

<html lang="en-us">

  <!-- Head -->
  <head>

    <!-- These three meta tags MUST come first in the <head> tag. -->
    <!-- All other <head> content must come AFTER these tags.     -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <title>My App</title>

    <!-- Styles -->
    <link rel="stylesheet" href="dsStyles.css" />
    <link rel="stylesheet" href="appStyles.css" />

    <!-- Scripts -->
    <script src="Scripts/jQuery-3.7.1.min.js"></script>
    <script src="Scripts/dsExtras.js"></script>

  </head>

  <!-- Body -->
  <body class="disable-select" oncontextmenu="return false;" onpointerdown="HideMenu()">

    <!-- For Full Screen Modal Popups -->
    <div id="modalBackdrop" class="dsScrollable"></div>


    <!--================================================-->
    <!--  dsSplash                                        -->
    <!--================================================-->
    <div id="dsSplash" class="themeDark scrollable">

      <div>
        <div id="dsSplashWelcome">Welcome to the</div>
        <div id="dsSplashTitle">App Title Here</div>
        <br>

        <img id="dsSplashLogo" src="Images/yourLogo.png" style="width:200px" /><br>
        <br>

        <div id="dsSplashVersion">──── Version 2024.07.17 ────</div>
        <br>
        <br>

        <button id="dsSplashButton" class="dsButton" onpointerdown="StopEvent(event); GoFullscreen(Startup)"> <big><i>Open</i></big>   ⯈⯈⯈ </button>
      </div>

      <div id="dsSplashCopyright">
        Copyright 2024, D+S Tech Labs, Inc.<br>
        All Rights Reserved
      </div>

    </div>

    <!-- Full Screen -->
    <div id="appScreen">

      <!--==============================================-->
      <!--  App Bar                                     -->
      <!--==============================================-->
      <div id="appBar" class="themeDark disable-select">

        <img class="appBarIcon" src="Images/yourLogo.png" />

        <div id="appBarTitleAndVersion">
          <div id="appTitle">Mobile Web App Template</div>
          <div id="appVersion">──── Version 2024.07.17 ────</div>
        </div>


        <!--======================================================-->
        <!-- Include IF there is a menu or settings for this app  -->
        <!--======================================================-->
        <span style="font-size:4vw; cursor:pointer" onpointerdown="StopEvent(event); ShowMenu()">≡</span>

        <div id="pageMenu" class="dsPageMenu" style="display:none; position:fixed; right:10px; top:80px; font-size:30px">
          <button class="dsMenuButton"> Menu Item 1 </button><br>
          <button class="dsMenuButton"> Menu Item 2 </button><br>
          <button class="dsMenuButton"> Menu Item 3 </button><br>
          <button class="dsMenuButton"> Menu Item 4 </button><br>
          <button class="dsMenuButton"> Menu Item 5 </button><br>
        </div>
        <!--======================================================-->


      </div>


      <!--=================================================-->
      <!--  Content Area                                   -->
      <!--=================================================-->
      <div id="contentArea" class="themeMedium dsScrollable disable-select">

        <!--=================================================
          Create <div>'s for each of your content pages.
          - The id's should match the html filename.
          - They must have the class 'contentPage'.
        ==================================================-->
        <div id="home"   class="contentPage"></div>
        <div id="themes" class="contentPage"></div>
        <div id="popups" class="contentPage"></div>

      </div>


      <!--=================================================-->
      <!--  Bottom Navigation Bar                          -->
      <!--=================================================-->
      <div id="navBar" class="themeDark disable-select">

        <!--=================================================
          Create <button>'s for each of your content pages.
          - They must have the class 'navButton'.
          - The onclick attribute must call ShowPage().
        ==================================================-->
        <button class="navButton" onpointerdown="StopEvent(event); ShowPage ('home'  , this);">⌂<br>Home</button>
        <button class="navButton" onpointerdown="StopEvent(event); ShowPage ('themes', this);">T<br>Themes</button>
        <button class="navButton" onpointerdown="StopEvent(event); ShowPage ('popups', this);">P<br>Popups</button>

      </div>

    </div>


    <!-- Load Scripts -->
    <script src="Scripts/appScript.js"></script>

  </body>

</html>

HTML-home, themes and popups pages:

<!--=======================================================
//
//     FILE : home.html
//
//  PROJECT : Mobile Web App Template
//
//   AUTHOR : Bill Daniels
//            Copyright 2023-2024, D+S Tech Labs, Inc.
//            MIT License
//
//======================================================-->

<div class="dsTitle">Home Page</div>
<hr>
<br>

The is the home page.<br>
<br>

Here is a bunch of text to show the custom scrollbars:<br>
<br>

Line 1<br>
Line 2<br>
Line 3<br>
Line 4<br>
Line 5<br>
Line 6<br>
Line 7<br>
Line 8<br>
Line 9<br>
Line 10<br>
Line 11<br>
Line 12<br>
Line 13<br>
Line 14<br>
Line 15<br>
Line 16<br>
Line 17<br>
Line 18<br>
Line 19<br>
Line 20<br>
Line 21<br>
Line 22<br>
Line 23<br>
Line 24<br>
<div style="white-space:nowrap">
  Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country. Now is the time for all good men to come to the aid of their country.
</div>
Line 26<br>
Line 27<br>
Line 28<br>
Line 29<br>
Line 30<br>
Line 31<br>
Line 32<br>
Line 33<br>
Line 34<br>
Line 35<br>
Line 36<br>
Line 37<br>
Line 38<br>
Line 39<br>
Line 40<br>
Line 41<br>
Line 42<br>
Line 43<br>
Line 44<br>
Line 45<br>
Line 46<br>
Line 47<br>
Line 48<br>
Line 49<br>
Line 50<br>
Line 51<br>
Line 52<br>
Line 53<br>
Line 54<br>
Line 55<br>
Line 56<br>
Line 57<br>
Line 58<br>
Line 59<br>
Line 60<br>
Line 61<br>
Line 62<br>
Line 63<br>
Line 64<br>
Line 65<br>
Line 66<br>
Line 67<br>
Line 68<br>
Line 69<br>
Line 70<br>
Line 71<br>
Line 72<br>
Line 73<br>
Line 74<br>
Line 75<br>
Line 76<br>
Line 77<br>
Line 78<br>
Line 79<br>
Line 80<br>
Line 81<br>
Line 82<br>
Line 83<br>
Line 84<br>
Line 85<br>
Line 86<br>
Line 87<br>
Line 88<br>
Line 89<br>
Line 90<br>
Line 91<br>
Line 92<br>
Line 93<br>
Line 94<br>
Line 95<br>
Line 96<br>
Line 97<br>
Line 98<br>
Line 99<br>
Line 100<br>
<br>

<!--=======================================================
//
//     FILE : themes.html
//
//  PROJECT : Mobile Web App Template
//
//   AUTHOR : Bill Daniels
//            Copyright 2023-2024, D+S Tech Labs, Inc.
//            MIT License
//
//======================================================-->

<div class="dsTitle">Theme Colors</div>
<hr>
<br>

<div class="dsBlock themeLight" style="width:80vw; height:200px">
  This is a "themeLight" block.<br>
  <br>

  <a href="index.html" target="_self">This is a link</a><br>
</div><br>
<br>
<br>

<div class="dsBlock themeMedium" style="width:80vw; height:200px">
  This is a "themeMedium" block.<br>
  <br>

  <a href="index.html" target="_self">This is a link</a><br>
</div><br>
<br>
<br>

<div class="dsBlock themeDark" style="width:80vw; height:200px">
  This is a "themeDark" block.<br>
  <br>

  <a href="index.html" target="_self">This is a link</a><br>
</div><br>
<br>
<br>

<!--=======================================================
//
//     FILE : popups.html
//
//  PROJECT : Mobile Web App Template
//
//   AUTHOR : Bill Daniels
//            Copyright 2023-2024, D+S Tech Labs, Inc.
//            MIT License
//
//======================================================-->

<div class="dsTitle">Popups</div>
<hr>
<br>

<button class="dsButton" style="width:20vw; font-size:1.5vw" onpointerdown="PopupMessage('Title here', 'Message here')"> Popup Message </button><br>
<br>

<button class="dsButton" style="width:20vw; font-size:1.5vw" onpointerdown="PopupBubble(event, 'HTML Message here')"> Popup Bubble </button><br>
<br>

<button class="dsButton" style="width:20vw; font-size:1.5vw" onpointerdown="PopupBubble(event, 'HTML Message here', 1000)"> Popup Bubble with Fade </button><br>
<br>

<button class="dsButton" style="width:20vw; font-size:1.5vw" onpointerdown="PopupBar('HTML Message')"> Popup Bar </button><br>
<br>

CSS:

/*=========================================================
//
//     FILE : appStyles.css
//
//  PROJECT : Responsive Mobile Web App Template
//
//   AUTHOR : Bill Daniels
//            Copyright 2023-2024, D+S Tech Labs, Inc.
//            MIT License
//
//=======================================================*/

/*=========================================================
  Mobile Web App Frame Styles:

  ┌─────────────────────────┐
  │ App Bar               ≡ │
  ├─────────────────────────┤
  │                         │
  │                         │
  │                         │
  │                         │
  │ Content Area            │
  │                         │
  │                         │
  │                         │
  │                         │
  │                         │
  │                         │
  │                         │
  │                         │
  ├─────────────────────────┤
  │ Nav Bar                 │
  └─────────────────────────┘

=========================================================*/

/*--- body ----------------------------------------------*/

body
{
  margin     : 0;
  padding    : 0;
  width      : 100vw;
  height     : 100vh;
  box-sizing : border-box;
  overflow   : hidden;
}

/*--- App Screen ----------------------------------------*/

#appScreen
{
  display         : none;
  flex-flow       : column nowrap;
  justify-content : space-between;
  align-items     : center;

  margin     : 0;
  padding    : 0;
  width      : 100vw;
  height     : 100vh;
  box-sizing : border-box;
  overflow   : hidden;

  color      : var(--light);
  background : var(--dark);

  /* defaults */
  font-family : sans-serif;
  font-size   : 16px;
  font-weight : normal;

  touch-action : manipulation;
}

/*--- App Bar -------------------------------------------*/

#appBar
{
  display         : flex;
  flex-flow       : row nowrap;
  justify-content : space-between;
  align-items     : center;

  margin     : 0;
  padding    : 0.5vh clamp(5px, 1vw, 10px);
  width      : 100vw;
  box-sizing : border-box;
  overflow   : hidden;
  z-index    : 10;

  box-shadow : 0 0 0.5vw var(--dark);
}

.appBarIcon
{
  height : clamp(40px, 7vw, 70px);
  vertical-align : middle;
}

#appBarTitleAndVersion
{
  flex        : 1;
  display     : inline-block;
  margin-left : 1vw;
  text-align  : left;
}

#appTitle
{
  color      : var(--light);
  background : transparent;

  font-family    : font_ethnocentric, serif;
  font-size      : clamp(20px, 3vw, 40px);
  letter-spacing : 0.15vw;
  line-height    : 1;
  text-shadow    : 0.2vw 0.2vw 0.2vw var(--dark);
  white-space    : nowrap;

  vertical-align : baseline;
}

#appVersion
{
  font-family : serif;
  font-size   : clamp(15px, 2vw, 20px);
  line-height : 1;
  text-shadow : 1px 1px 0px var(--dark);
}

/*--- Content Area & Pages ---------------------------------*/

#contentArea
{
  flex       : 1;
  margin     : 0;
  padding    : 1vw;
  width      : 100vw;
  box-sizing : border-box;
  overflow   : auto;
  z-index    : 0;
  text-align : center;
}

.contentPage
{
  display : none;
}

/*--- Bottom Navigation Bar -----------------------------*/

#navBar
{
  display         : flex;
  flex-flow       : row nowrap;
  justify-content : space-around;
  align-items     : center;

  width      : 100vw;
  margin     : 0;
  padding    : 0.5vh 0;
  box-sizing : border-box;
  overflow   : hidden;
  z-index    : 10;

  box-shadow : 0 0 0.5vw #000000;
}

.navButton
{
  margin  : 0;
  padding : 0.5vw 1vw;

  color         : var(--light);
  background    : transparent;
  border        : 1px solid transparent;
  border-radius : 1vw;
  box-sizing    : border-box;

  font-family : sans-serif;
  font-size   : clamp(15px, 2vw, 25px);
  font-weight : normal;
  line-height : 1;
  white-space : nowrap;

  cursor : pointer;

  vertical-align : middle;
}

.navButton:hover
{
  border : 1px solid #808080;
}

.navButton.viewing
{
  color      : #404040;
  background : linear-gradient(to bottom, var(--light), #808080);
  border     : 1px solid transparent;
}

.navButton span
{
  margin  : 0;
  padding : 0;

  font-size   : clamp(30px, 4vw, 50px);
  line-height : 1;
}

.navButton img
{
  margin : 0;
  height : clamp(30px, 5vw, 40px);
}

Javascript:

//=========================================================
//
//     FILE : appScript.js
//
//  PROJECT : Mobile Web App Template
//
//   AUTHOR : Bill Daniels
//            Copyright 2023-2024, D+S Tech Labs, Inc.
//            MIT License
//
//=========================================================

//--- Globals ---------------------------------------------



//--- Initial JS ------------------------------------------

try
{
  // Browser stuff
  window.devicePixelRatio = 1.0;  // set pixel density to 1

  // Load all pages
  LoadContentPages ();
}
catch (ex)
{
  ShowException (ex);
}

//--- Startup ---------------------------------------------

function Startup ()
{
  try
  {
    // Hide Splash and show app screen
    $("#dsSplash" ).hide ();
    $("#appScreen").show ();
    $("#appScreen").css  ('display', 'flex');

    // Click on first navButton
    // $(".navButton").first().mousedown();  // Not working for pointerdown; no pointerdown() method in jQuery ???
    firstNavButton = document.getElementsByClassName ('navButton')[0];
    ShowPage ('home', firstNavButton);
  }
  catch (ex)
  {
    ShowException (ex);
  }
}

This code somewhat makes your web app look and act like a native android app.
See this template on GitHub.