Tizen Developers

Hello, from what I can understand from your question is you want to run your app in full screen (which is running in half of your screen and other half is blank).

You can use:

<script>
   function toggleFullScreenHandler(e, target) 
   {
      var target = document.getElementById(target);
      /* Check whether in fullscreen mode */
      if (document.webkitIsFullScreen) 
      { 
         /* Cancel the fullscreen mode */
         document.webkitCancelFullScreen(); 
      } 
      else 
      {
         /* Switch on the fullscreen mode */
         target.webkitRequestFullScreen(); 
      }
   }
    
   document.getElementById('toggleImage').addEventListener('click', function(e) 
   {
      toggleFullScreenHandler(e, 'fs-image')
   }, false);
    
   document.getElementById('toggleVideo').addEventListener('click', function(e) 
   {
      toggleFullScreenHandler(e, 'video')
   }, false);
    
   document.addEventListener('click', function(e) 
   {
      toggleFullScreenHandler(e)
   }, false);
</script>

<style>
   #fs-image: -webkit-full-screen 
   {
      background: #39c;
   }
   #fs-image: full-screen 
   {
      background: #39c;
   }
</style>

<div class="my-class">
   <div id='fs-image'>
      <img src="images/logo.png" alt="LOGO">
      <p id="log"></p>
      <p><button id="toggleImage">Toggle Image fullscreen</button></p>
   </div>
   <div>
      <video id="video" controls preload="none" 
             poster="http://media.w3.org/2010/05/sintel/poster.png">
         <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" 
                 type="video/mp4">
      </video>
   </div>
   <button id="toggleVideo">Toggle Video fullscreen</button>
</div>

From here:

https://developer.tizen.org/development/tutorials/web-application/w3chtml5supplementary-features/supplementary-features/fullscreen-api-mozilla