Testing Mobile on iOS scanner.

by ksoncan34

HTML

<html lang="en">

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
    
  </head>

  <body>
    <div id="react-container">
      <div class="header">
        <h1>Storefront Kiosk Transfer</h1>
      </div>
      <div class="wrapper" id="main">
        <div>
          <p class="info"></p>          
          <p>&nbsp;</p>
          <div id="upload-section" class="form-wrapper">
            <div id="check-button" class="button button-input"><span class="button-text">Choose Images...</span></div>            
          </div>
        </div>
      </div>
      <div class="storefront-footer"><span>Copyright © Storefront.com Online Inc. 1999-2020 &nbsp; <a target="_blank" href="/privacy-policy">Privacy Policy</a></span>
        <button class="button" id="test-button">Test</button>        
        
      </div>     
    
    </div>
  </body>

</html>

CSS

* {
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    font-family: Roboto, Tahoma, Geneva, sans-serif;
    font-size: 12px;
    height: 100%;
    background-color: #E0E0E0;
    color: #333;
}

#react-container {
    height: 100%;
}

input[type=file] {
    display: inline-block;
    opacity: 0;
    position: absolute;
    z-index: 99;
    cursor: pointer;
    top: 0;
    color: transparent;
    left: 0;
    bottom: 0;
    user-select: none;
    width: 100%;
}

input#input-code {
    margin: 20px;
    width: calc(100% - 40px);
    box-sizing: border-box;
    font-size: 30px;
    border-radius: 5px;
}

h1 {
    font-size: 19px;
    font-weight: bold;
}

h3 {
    text-align: center;
    font-size: 18px;
    margin: 15px;
}

h1#payment-pause-title, h1#checkout-title {
    margin: 20px;
    text-align: center;
}

#checkout-info {
    margin: 20px;
    font-size: 18px;
}

#payment-pause-message {
    margin: 0 20px;
    text-align: center;
}

.header {
    background-color: #6C0000;
    padding: 20px 0;
    color: #feffff;
    text-align: center;
    position: fixed;
    width: 100%;
    height: 20px;
    top: 0;
    z-index: 999;
}

p.info {
    padding: 15px 30px;
    font-size: 18px;
    text-align: center;
}

div p.info:first-child {
    padding-top: 10%;
}

h2.message {
    font-size: 20px;
    text-align: center;
    margin-top: 20vh;
}

.wrapper {
    height: calc(100% - 145px);
    position: relative;
    top: 60px;
    overflow: auto;
}

.storefront-footer {
    min-width: 280px;
    background-color: #6c0000;
    padding: 15px 0;
    color: #feffff;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 13px;
    height: 55px;
}

.form-wrapper {
    text-align: center;
    position: relative;
    margin-bottom: 20px;
}


.button-input {
    margin-top: 50px;
    font-size: 18px;
    padding: 25px 60px 25px 80px;
    width: 50%;
}

.button {
    background: linear-gradient(to bottom, rgba(255,...

JavaScript

let runCount = 0;
const $testButton = $('#test-button');
const $window = $(window);

function testScreen() {
	runCount++;
  const screenWidth = `${screen.width}x${screen.height}`;
  const windowWidth = `${$window.width()}x${$window.height()}`;
  const visible = $testButton.is(':visible') ? 'Yes' : 'No';
  $('.info').html(`<p>Count ${runCount}</p>
   <p>Screen Size: ${screenWidth}<p>
   <p>Window Size: ${windowWidth}</p>
   <p>Test Button Visible: ${visible}</p>`);
   
}

$(window).on('resize', testScreen);
$('#check-button').on('click', testScreen);
testScreen();