How can redirect html page in mobile version only without refresh redirect page

Question

How to redirect html page url in mobile version only without refresh page

 $(document).ready(function() {
  if (screen.width <= 800) {
  document.location ="page.html";
  }

   });

/* [Object] Modal
 * =============================== */
.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .25s ease;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  margin: auto;
  overflow: auto;
  background:#fff;
  border-radius: 5px;
  padding: 5em 2em;
  height: 10%;
}

.modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #aaa;
}

.modal__close:before {
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {

  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
  }
}


/* Other
 * =============================== */


.btn {
  cursor: pointer;
 /*  background: #27ae60; */
  display: inline-block;
  padding: 0em 1em;
  color: #333;
  border-radius: 3px;
  font-size:13px;
}


#module-circle{font-size:8px !important}

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="UTF-8">




    </head>
    <body class="landing">

    <!-- Main -->
    <section style="width:100%" class="table-content" id="Diverse-content">
    <div class="table-content" id="table1-content">
    <header class="major" id="Diverse-head">


    </header>  


    <!-- Image -->

        <section class="Diverse-content">
    <div class="row">
    <section class="4u 6u(medium) 12u$(small) cusfont">
<h1 style="visibility:hidden">Example</h1>
<div>

  <p>

  <label class="btn" for="modal-1"><i class="fa fa-circle" id="module-circle"></i> Example1</label>


  </p>

</div>


<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal-1"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-1"></label>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>
  </div>
</div>



    </section>
    <section class="4u 6u$(medium) 12u$(small) cusfont" >
    <!-- <div class="drivers-table2">
         <div class="head-section1">
    <h4><i class="fa fa-users"></i>Heading </h4>
         </div>

    <p class="batch">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>                            

       </div> -->

       <div>

  <p>
    <label class="btn" for="modal-2"><i class="fa fa-circle" id="module-circle"></i>  Example2</label>

  </p>
</div>


<input class="modal-state" id="modal-2" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal-2"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-2"></label>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>
  </div>
</div>
    </section>


    </div>


    </section>









    </div>


    </section>







    </div>


    </section>


    </div>
    </section>
    </td>
    <td style="width: 10%;"></td>
    </tr>
    </table>

How can this page layout will be show mobile version only without refresh page using javascript.

mobile version only will show this page without refresh

score 1 · Answer 1 · edited May 23 '17 at 11:53

You can use one of these coding languages (JS, .htaccess, PHP):

JS:

if (screen.width <= 699) {
    document.location = "mobile.html";
}

Source: https://css-tricks.com/snippets/javascript/redirect-mobile-devices/ <= This might be the one your looking for.

.htaccess:

RewriteEngine On

# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)noredirect=true(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:%{HTTP_HOST},S]

# Check if this looks like a mobile device
# (You could add another [OR] to the second one and add in what you
#  had to check, but I believe most mobile devices should send at
#  least one of these headers)
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile}       !^$
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST}          !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie}        !\smredir=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.example.org%{REQUEST_URI} [R,L]

Source: Mobile Redirect using htaccess <= This is a little complex but, it works

PHP:

<? if (
stristr($ua, "Windows CE") or
stristr($ua, "Mobile") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='YOUR-MOBILE-SITE.com/index.php';
header ('Location: '.$location);
exit;
}
?>

http://www.designyourway.net/blog/resources/detecting-and-redirecting-mobile-users/ <= Just an extra.

Good Luck!

How can redirect html page in mobile version only without refresh redirect page

1 Answers1