php – Mobile detect directive only works after first refresh

I am trying to detect mobile devices and send them to a different directory on my server. The desktop version of the website is a WordPress website; the mobile version is HTML. At the moment, the mobile website only loads if I refresh the page. The first load seems to come from the browser cache but this issue persists even after I clear the browser cache.

I am using this Mobile-detect library mobile detect library to detect if the device requesting the page is mobile and redirecting the visitor with PHP header(Location: ...).

In the root of my server, I’ve got:

// website structure for mywebsite.com
/public_html 
    /lib
        /mobile-detect.php // the mobile detect 3rd-party library
    /m // the mobile website version
        /index.html
        /index.html.bak.bak
    /wp-admin
    /wp-content
        /themes/
            my-child-theme/
    /wp-includes
    etc...

Inside the header.php file in my child theme, I’ve tried the following:

<?PHP
    // at the top of the page
    require_once 'lib/mobile_detect.php';
    $detect = new Mobile_Detect;
    if ( $detect->isMobile() ) {
        header('Location: https://mywebsite.com/m/');
        exit;
    }
?>

I tried expanding that with more directives related to caching:

<?PHP
    // at the top of the page
    header("Cache-Control: max-age=0, no-cache, no-store, must-revalidate"); //from amclin

    require_once 'lib/mobile_detect.php';
    $detect = new Mobile_Detect;
    if ( $detect->isMobile() ) {
        header('Location: https://mywebsite.com/m/');
        exit;
    }
?>

I’ve tried adding meta tags to the <head> of the document after the PHP code:

<meta http-equiv=“Expires” content=”-1″>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

And I’ve tried using Javascript in addition to all the rest of it:

<script type="text/javascript">
    if (screen.width <= 699) {
        document.location = "https://mywebsite.com/m/";
    }
</script>

The original example from the 3rd party mobile-detect library recommended using Cookies here but I have to admit, I didn’t understand the logic of it. I tried it originally but had the same issue:

<?php
    @include('lib/mobile_detect.php');
    $detect = new Mobile_Detect();
    if ($detect->isMobile() && isset($_COOKIE('mobile'))) {
        $detect = false;
    }
    elseif ($detect->isMobile()) {
        header('Location:https://gorgepointepub.com/m/');
    } 
?>

The index.html page inside public_html/m/ contains this:

<?php
setcookie('mobile','m',time()+3600,'/','mywebsite.com/');
echo @file_get_contents('index.html.bak.bak');

I also tried adding caching directives to this file:

I also tried using wp_redirect in place of header():

<?PHP
    // at the top of the page
    require_once 'lib/mobile_detect.php';
    $detect = new Mobile_Detect;
    if ( $detect->isMobile() ) {
        wp_redirect('Location: https://mywebsite.com/m/');
        exit;
    }
?>

The WP site uses Clearfy Caching plugin. I’ve cleared the cache on that time and again.

So I’m clearly working at the wrong level for this and am curious what’s going on here.

Why is the browser getting the desktop version first and then, after refreshing the page, going to the server and getting a fresh header.php file? Is this code in the wrong place? Should it be in an index file somewhere else? Do I need to use cookies for this? Aggghhhh!

Thanks for your help on this!

aws – Best choice of Amazon services for deployment of a video processing mobile app

I need help to decide on the backend infrastructure for our senior design project. We will build a mobile application (on Flutter) where users record videos and/or audio of themselves and get emotion/mood predictions. However, I did some research about this, and, as far I see, video streaming might be time-consuming if we consider recording, sending to the backend, and then process to get a prediction.

Briefly, we will have an ML model, a Node.js RESTful API, and a Flutter mobile app at the end. Also, we plan to deploy our project on AWS. I want to ask which services should we use to design a performant backend?

I found the Kinesis Video Streaming (KVS) service of AWS, but I do not know if it is a good choice. Also, I do not know how to process videos coming from that service.

If someone can give me a simple idea of software architecture, I would be glad to hear about it.

interaction design – Mobile doodling with finger, and being able to scroll?

I am building a doodling app and I would like the user to be able to scroll the page and doodling with their finger.

I presume I must use buttons for the user to be able to switch between doodling and scrolling, however, I would be interested to know if there are any other solutions that may be better.

enter image description here

a. My solution was to simply have the pen and eraser tool be available to use, but by default the scrolling would be the primary interaction. Which is not ideal as I would like the user to interact with the page first by doodling on the page (not scrolling).

b. I run into the issue that if the user has pen tool (doodling) as their primary interaction, they won’t realize that there is a way to scroll as well (unless they tap on the pen tool to clear the selection)

Any thoughts on this.. Is there a better solution?

Thank you.

Free Crypto Signals On Your Mobile App & Automated Crypto Trading Bot

Free Crypto Bot – https://t.me/cryptosignalalert

FREE Crypto Bot for for Binance, Bybit, Binance Future, Bittrex, Bitcoin updates and many more to our Traders. Everything is FREE.If you dont have time for manual trading then you can use our Bot which makes daily profit – Watch the live demo of the Bot

We also provide high quality signals for Binance, Binance Futures, Bitmex, Bittrex, Kraken, Bitseven, Kucion, HitBTC receive daily 3-4 good quality signals around 80-90% accuracy.

We too provide Free Crypto signals on your mobile App now you don’t need telegram just install this mobile app & start trading from our mobile for more join above given Telegram group

api – jQuery on click not working on mobile

I try to change click to click tap but the problem still occur
This code working on desktop , laptop but on mobile doesnt alert

jQuery('#register-me').on('click tap',function(){

var action = 'register_action';
     
var username = jQuery("#st-username").val();
var mail_id = jQuery("#st-email").val();
 var firname = jQuery("#st-fname").val();
 var lasname = jQuery("#st-lname").val();
 var passwrd = jQuery("#st-psw").val();  
    if (!username) {
    alert("Please Enter Username");
        return
    }    

     if (!mail_id) {
        alert("Please Enter Email");
         return
    }
     if (!isValidEmailAddress(mail_id)){
         alert("Please Enter Valid Email");
         return
     }
     if (!firname) {
        alert("Please Enter IC");
         return
     }
     if (firname.length<12||firname.length>12)  {
        alert("Please Enter Valid IC");
         return
     
     }
     if (!lasname) {
        alert("Please Enter Phone");
         return
    }
    
     if (!isANumber(lasname)){ 
    alert("Please Enter Valid No Phone");
         return
    }
         if (!passwrd) {
        alert("Please Enter Password");
             return
    }
     
     
     
 var url = "https://secure.astrataipan.com/apibsmmkl_uat/api/regnewtmpbsmm";
     console.log(username)
        console.log(mail_id)
        console.log(lasname)
        console.log(firname)
        console.log(passwrd)
 
var ajaxdata = {

action: 'register_action',
 name: username,
 email: mail_id,
 icno: firname,
 phoneno: lasname,
 password: passwrd,

};

jQuery.post( ajaxurl, ajaxdata, function(res){ // ajaxurl must be defined previously
console.log(res)
jQuery("#error-message").html(res);
 });
jQuery.post( url, ajaxdata, function(res){ // ajaxurl must be defined previously
console.log(res)
    if (res.Code=="888"){
        alert(res.Status);
    }
    else if (res.Code=="887"){
        alert(res.Status);
    }
    else if (res.Code=="200"){
        alert("Terima kasih kerana berminat di dalam program BSMMKL. Kami telah menerima permohonan anda dan kakitangan kami akan menghubungi anda dalam masa terdekat. !");
    }
    else {
        alert('Registration Error');
    }
jQuery("#error-message").html(res);
 });
     
     function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(
        /^((((a-z)|d|(!#$%&'*+-/=?^_`{|}~)|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF))+(.((a-z)|d|(!#$%&'*+-/=?^_`{|}~)|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF))+)*)|((x22)((((x20|x09)*(x0dx0a))?(x20|x09)+)?(((x01-x08x0bx0cx0e-x1fx7f)|x21|(x23-x5b)|(x5d-x7e)|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF))|(\((x01-x09x0bx0cx0d-x7f)|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF)))))*(((x20|x09)*(x0dx0a))?(x20|x09)+)?(x22)))@((((a-z)|d|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF))|(((a-z)|d|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF))((a-z)|d|-|.|_|~|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF))*((a-z)|d|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF)))).)+(((a-z)|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF))|(((a-z)|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF))((a-z)|d|-|.|_|~|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF))*((a-z)|(u00A0-uD7FFuF900-uFDCFuFDF0-uFFEF)))).?$/i
    );

    return pattern.test(emailAddress);
}
     function isANumber(str){
  return !/D/.test(str);
}
 });

interface – CTA label for mobile reporting page

I’m putting together a simple website that allows users to view football-related reports. Users are able to select from 4 report types (player, team, league, country). Depending on which report type is selected, an additional dropdown is displayed which features specific options. The user can also select a date range (e.g. Last 7 days).

On the desktop site, all these options are visible. However, on mobile, these options are hidden in a slide-out drawer and is revealed when a user clicks a CTA. My question is, in this context, is the word filters a suitable label for this CTA?

I’m slightly hesitant as the report type dropdown doesn’t feel like a filter.

how to discover if a Samsung device is already registered with Knox Mobile Enrollment (KME)?

I’m asking this question as a end user not a Knox cloud admin. Bearing this in mind,

I’ve finished the first initial setup without allowing the device to connect to the Internet (and thus couldn’t be aware of any possible Knox enrollment prompt). And now I would like to discover if this device is already registered with Samsung Knox Mobile Enrollment (KME) and thus if it is a corporate-owned device or BYOD (any kinda work device)?

I shouldn’t do a factory reset for some reasons. How to verify that without giving the device a factory reset?

web app – how to change object size Google web apps for mobile

I’m doing my first Google Web App linked to a Google Sheet.

I’m not well versed on the web front end, javascript, ccs, bootstrap, etc.

I don’t know how to make the controls size and font size bigger to easily seen and completed on an android phone.

<!DOCTYPE html>
<html>
  <head>
    <title>CENSIMENTO TARI</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <base target="_top">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">    

    <style>
    body {
    font-size: 40px
    }
    </style>
    <script>
    function GetNumber(street) 
    {
    var streetType = document.querySelector("input(name=addressType):checked").value;    
    
    google.script.run.withSuccessHandler(function(ar) 
    {

    console.log(ar);
    
    number.length = 0;

    let option = document.createElement("option");
    option.value = "";
    option.text = "";
    number.appendChild(option);
    
    ar.forEach(function(item, index) 
    {    
      let option = document.createElement("option");
      option.value = item(2);
      option.text = item(1);
      number.appendChild(option);    
    });
    
    }).getNumbers(street,streetType);
    
    };
    function ShowAddressType()
    {
    var streetType = document.querySelector("input(name=addressType):checked").value;    
    var street = document.getElementById("street").value
     
    if (streetType=="Domestic"){
     var x = document.getElementById("Domestic");
     x.style.display = "block";
     x = document.getElementById("NonDomestic");
     x.style.display = "none";
     
    }
    else {
     var x = document.getElementById("Domestic");
     x.style.display = "none";
     x = document.getElementById("NonDomestic");
     x.style.display = "block";
     
    }
    GetNumber(street);    
    };
    
    function ShowCondominiums(condominus)
    {
    //alert('condominus: ' + condominus);
    document.getElementById("Condominiums").innerHTML = "Condominiums: " + condominus;
    document.getElementById("UtenzeTari").value = condominus;
    };
   function previewFile() {
  const preview = document.querySelector('img');
  const file = document.querySelector('input(type=file)').files(0);
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    // convert image file to base64 string
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
};

  </script>  
  </head>
  <body>
  <div style="padding: 10px;  font-size: 40px" class="" >   
    <h1 style="font-size: 60px" >CENSIMENTO TARI</h1>
    <?var url = getUrl();?>
    <form method="post" id="form" action="<?= url ?>" >   
    
      <label class="form-row" >Indirizzo</label>
      <select name="street" id="street" onchange="ShowAddressType()" class="form-control" >
      <option value="" ><option>VICO PARADISO</option><option>VICO PERCETTORE</option><option>VICO PERSICHILLO</option><option>VICO PIZZOFERRATO</option><option>VICO PORTA FREDDA</option><option>VICO PORTELLO</option><option>VICO S. BARTOLOMEO</option><option>VICO TRE DITA</option><option>VICO VAGLIA</option><option>VICOLETTO S. ANDREA</option><option>VICOLETTO S. LEONARDO</option><option>VICOLETTO S. NICOLA</option><option>VICOLO VAGLIA</option>
      </select><br>
      <label class="radio-inline" class="form-control" >
          <input type="radio" name="addressType" id="addressTypeD" value="Domestic"  onchange="ShowAddressType()" class="form-control"   > Domestic</label>          
       <label class="radio-inline" class="form-control" >
          <input type="radio" name="addressType" id="addressTypeND" value="Non-Domestic" class="form-control"   onchange="ShowAddressType()" checked> Non-Domestic</label><br>
      <br><label class="form-row" >Civico</label>
      <select name="number" id="number" onchange="ShowCondominiums(this.value)" class="form-control"  >
      </select><br><br>
      <span id="Condominiums" >Condominiums: </span><br>

 <!--
      <input type="file" name="photo" id="photo" onchange="previewFile()"><br>
      <img src="" height="200" alt="Image preview...">
-->
<div name="Domestic" id="Domestic">

      <label class="form-row"  for="UtenzeCensite">Utenze Censite:</label>
      <input type="text" name="UtenzeCensite" id="UtenzeCensite" class="form-control" /><br>
      <label class="form-row"  for="UtenzeTari">Utenze Tari:</label>
      <input type="text" name="UtenzeTari" id="UtenzeTari" class="form-control" /><br>
      <label class="form-row"  for="Scostamento">Scostamento:</label>
      <input type="text" name="Scostamento" id="Scostamento" class="form-control" /><br>
      <label class="form-row"  for="Ud">Ud:</label>
      <input type="text" name="Ud" id="Ud" class="form-control" /><br>
      <label class="form-row"  for="Und">Und:</label>
      <input type="text" name="Und" id="Und" class="form-control" /><br>
      <label class="form-row"  for="Amministratore">Amministratore:</label>
      <input type="text" name="Amministratore" id="Amministratore" class="form-control" /><br>
      <label class="form-row"  for="TelefonoAmm">Telefono Amm.:</label>
      <input type="text" name="TelefonoAmm" id="TelefonoAmm" class="form-control" /><br>
      <label class="form-row"  for="RelazioneServizio">Relazione Servizio:</label>
      <input type="text" name="RelazioneServizio" id="RelazioneServizio" class="form-control" /><br>
      <label class="form-row"  for="Esito">Esito:</label>
      <input type="text" name="Esito" id="Esito" class="form-control" /><br>
      <label class="form-row"  for="secco40">secco 40:</label>
      <input type="number" name="secco40" id="secco40" class="form-control" /><br>
      <label class="form-row"  for="carta40">carta 40:</label>
      <input type="number" name="carta40" id="carta40" class="form-control" /><br>
      <label class="form-row"  for="plastica40">plastica 40:</label>
      <input type="number" name="plastica40" id="plastica40" class="form-control" /><br>
      <label class="form-row"  for="vetro40">vetro 40:</label>
      <input type="number" name="vetro40" id="vetro40" class="form-control" /><br>
      <label class="form-row"  for="organico40">organico 40:</label>
      <input type="number" name="organico40" id="organico40" class="form-control" /><br>
      <label class="form-row"  for="secco10">secco 10 :</label>
      <input type="number" name="secco10" id="secco10" class="form-control" /><br>
      <label class="form-row"  for="organico10">organico 10:</label>
      <input type="number" name="organico10" id="organico10" class="form-control" /><br>
      <label class="form-row"  for="BUSTE">BUSTE:</label>
      <input type="number" name="BUSTE" id="BUSTE" class="form-control" /><br>
      <label class="form-row"  for="a360vetro">360 vetro:</label>
      <input type="number" name="a360vetro" id="a360vetro" class="form-control" /><br>
      <label class="form-row"  for="a360plastica">360 plastica:</label>
      <input type="number" name="a360plastica" id="a360plastica" class="form-control" /><br>
      <label class="form-row"  for="a360carta">360 carta:</label>
      <input type="number" name="a360carta" id="a360carta" class="form-control" /><br>
      

</div>
<div name="NonDomestic" id="NonDomestic">
          

      <label class="form-row"  for="Intestazione">Intestazione:</label>
      <input type="text" name="Intestazione" id="Intestazione" class="form-control" /><br>
      <label class="form-row"  for="IntestazioneTari">Intestazione Tari:</label>     
      
     
     <select type="select" name="IntestazioneTari" id="IntestazioneTari" class="form-control" >r>
            <option value="" ></option>
            <option>1840 SOCIETA' COOPERATIVA SOCIALE</option><option>ZZCAR S.R.L.</option>
   
     </select><br>

     <label class="form-row"  for="Tipologia">Tipologia:</label>
      <input type="text" name="Tipologia" id="Tipologia" class="form-control" /><br>
      <label class="form-row"  for="Telefono">Telefono:</label>
      <input type="text" name="Telefono" id="Telefono" class="form-control" /><br>
      <label class="form-row"  for="categoriatari">categoria tari:</label>
      <input type="text" name="categoriatari" id="categoriatari" class="form-control" /><br>
      <label class="form-row"  for="dCARTA40">CARTA 40:</label>
      <input type="number" name="dCARTA40" id="dCARTA40"  class="form-control"/><br>
      <label class="form-row"  for="dCARTA120">CARTA 120:</label>
      <input type="number" name="dCARTA120" id="dCARTA120"  class="form-control"/><br>
      <label class="form-row"  for="dCARTA240">CARTA 240:</label>
      <input type="number" name="dCARTA240" id="dCARTA240"  class="form-control"/><br>
      <label class="form-row"  for="dCARTA360">CARTA 360:</label>
      <input type="number" name="dCARTA360" id="dCARTA360"  class="form-control"/><br>
      <label class="form-row"  for="dPLASTICA40">PLASTICA 40:</label>
      <input type="number" name="dPLASTICA40" id="dPLASTICA40"  class="form-control"/><br>
      <label class="form-row"  for="dPLASTICA120">PLASTICA 120:</label>
      <input type="number" name="dPLASTICA120" id="dPLASTICA120"  class="form-control"/><br>
      <label class="form-row"  for="dPLASTICA240">PLASTICA 240:</label>
      <input type="number" name="dPLASTICA240" id="dPLASTICA240"  class="form-control"/><br>
      <label class="form-row"  for="dPLASTICA360">PLASTICA 360:</label>
      <input type="number" name="dPLASTICA360" id="dPLASTICA360"  class="form-control"/><br>
      <label class="form-row"  for="dORGANICO40">ORGANICO 40:</label>
      <input type="number" name="dORGANICO40" id="dORGANICO40"  class="form-control"/><br>
      <label class="form-row"  for="dORGANICO120">ORGANICO 120:</label>
      <input type="number" name="dORGANICO120" id="dORGANICO120"  class="form-control"/><br>
      <label class="form-row"  for="dORGANICO240">ORGANICO 240:</label>
      <input type="number" name="dORGANICO240" id="dORGANICO240"  class="form-control"/><br>
      <label class="form-row"  for="dORGANICO360">ORGANICO 360:</label>
      <input type="number" name="dORGANICO360" id="dORGANICO360"  class="form-control"/><br>
      <label class="form-row"  for="dVETRO40">VETRO 40:</label>
      <input type="number" name="dVETRO40" id="dVETRO40"  class="form-control"/><br>
      <label class="form-row"  for="dVETRO120">VETRO 120:</label>
      <input type="number" name="dVETRO120" id="dVETRO120"  class="form-control"/><br>
      <label class="form-row"  for="dVETRO240">VETRO 240:</label>
      <input type="number" name="dVETRO240" id="dVETRO240"  class="form-control"/><br>
      <label class="form-row"  for="dVETRO360">VETRO 360:</label>
      <input type="number" name="dVETRO360" id="dVETRO360"  class="form-control"/><br>
      <label class="form-row"  for="dSECCO40">SECCO 40:</label>
      <input type="number" name="dSECCO40" id="dSECCO40"  class="form-control"/><br>
      <label class="form-row"  for="dSECCO120">SECCO 120:</label>
      <input type="number" name="dSECCO120" id="dSECCO120"  class="form-control"/><br>
      <label class="form-row"  for="dSECCO240">SECCO 240:</label>
      <input type="number" name="dSECCO240" id="dSECCO240"  class="form-control"/><br>
      <label class="form-row"  for="dSECCO360">SECCO 360:</label>
      <input type="number" name="dSECCO360" id="dSECCO360"  class="form-control"/><br>      
      
      

</div>
        Upload a file
        <div id="data"></div>
        <input name="file" id="uploadfile" type="file"  onchange="previewFile()" class="btn btn-primary">
      
      <input type="submit" name="submitButton" value="Submit" class="btn btn-primary" /> 
      <img src="" height="200" alt="Image preview...">
      
          <script>
    $('#uploadfile').on("change", function() {
        var file = this.files(0);
        var fr = new FileReader();
        fr.fileName = file.name;
        fr.onload = function(e) {
            e.target.result
            html = '<input type="hidden" name="data" value="' + e.target.result.replace(/^.*,/, '') + '" >';
            html += '<input type="hidden" name="mimetype" value="' + e.target.result.match(/^.*(?=;)/)(0) + '" >';
            html += '<input type="hidden" name="filename" value="' + e.target.fileName + '" >';
            $("#data").empty().append(html);
        }
        fr.readAsDataURL(file);
    });
   
     var x = document.getElementById("Domestic");
     x.style.display = "none";
     x = document.getElementById("NonDomestic");
     x.style.display = "block";
   
    </script>
    </form>
    </div>
  </body> 
  
</html>

Idiom for global shortcuts on mobile devices

I have a mobile web app and there are two different modes for viewing content and the user may frequently toggle between them. I’d like to provide a very convenient way for the user to request this toggle action.

A link onscreen isn’t good, because the content is full screen and so the link would block it. Gestures might be okay, but might also interfere with what each view wants to do with a gesture.

What I’d really like is the mobile equivalent of a global hotkey, something that you can do that would be handled by the app and then relayed to the content pane if not handled globally.

Is there a good way to accomplish this?