Click here to Skip to main content
15,666,183 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
i have a quiz application that is designed bootstrap libraries and jQuery libraries and backend is in PHP. Applications UI's is completely perfect in all windows and andriod devices but when it comes to safari or any browser on iOS, applications UI becomes disturbed. I have also checked in my network. jquery libraries status are 304. Any lead what's the problem ?
here's my code

What I have tried:



if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))

function isMobile()
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);

// If the user is on a mobile device, redirect them
if (isMobile()) {
//    header("Location: index.php");

$con = getDB();
    <!DOCTYPE html>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//"></script>
        <link href="//" rel="stylesheet" id="bootstrap-css">
        <script src="//"></script>

        <script src=""></script>
        <!------ Include the above in your HEAD tag ---------->
            .login-block {
                float: left;
                width: 100%;
                padding: 30px 0;

            .container {
                background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
                border-radius: 10px;
                width: 40%;
                height: 70%;

            .login-sec {
                padding: 50px 30px;
                position: relative;

            .login-sec h2 {
                margin-bottom: 0px;
                font-weight: 800;
                font-size: 30px;
                color: #0069c0;

            .login-sec h2:after {
                content: " ";
                width: 100px;
                height: 5px;
                background: #D16BA5;
                display: block;
                margin-top: 20px;
                border-radius: 3px;
                margin-left: auto;
                margin-right: auto

            .btn-login {
                background: #0069c0;
                color: #fff;
                font-weight: 600;

            p.title {
                text-align: center;
                font-size: 22px;

            @media only screen and (max-width: 600px) {
                .container {
                    width: auto;
                    height: auto;
                    margin-left: 10px;
                    margin-right: 10px;

            .quadrat {
                width: 50px;
                height: 50px;
                -webkit-animation: NAME-YOUR-ANIMATION 2s infinite; /* Safari 4+ */
                -moz-animation: NAME-YOUR-ANIMATION 2s infinite; /* Fx 5+ */
                -o-animation: NAME-YOUR-ANIMATION 2s infinite; /* Opera 12+ */
                animation: NAME-YOUR-ANIMATION 2s infinite; /* IE 10+, Fx 29+ */
                padding-left: 10px;
                padding-right: 10px;

            @-webkit-keyframes NAME-YOUR-ANIMATION {
                0%, 49% {
                    background-color: yellow;
                    border: 0px solid red;
                    color: #000;
                50%, 100% {
                    background-color: red;
                    border: 0px solid yellow;
                    color: #fff;

            .quadrat1 {
                -webkit-animation: NAME-YOUR-ANIMATION-a 2s infinite; /* Safari 4+ */
                -moz-animation: NAME-YOUR-ANIMATION-a 2s infinite; /* Fx 5+ */
                -o-animation: NAME-YOUR-ANIMATION-a 2s infinite; /* Opera 12+ */
                animation: NAME-YOUR-ANIMATION-a 2s infinite; /* IE 10+, Fx 29+ */
                padding-left: 10px;
                padding-right: 10px;

            @-webkit-keyframes NAME-YOUR-ANIMATION-a {
                0%, 49% {
                    color: #000;
                    background: #fff;
                50%, 100% {
                    color: #fff;
                    background: #f00;



    <section class="login-block">
        <p class="title">
            <span> <img src="img/poa_logo.png" height="100" alt="Pakistan Olympic Association"> </span><br/>
            <span class="quadrat1">1st Pakistan Athletes Forum<br/>14-15 Nov 2020</span>
        <div class="container">
            <div class="row">
                <div class="col login-sec">
                    <h2 class="text-center">Login</h2>
                    <form class="login-form" method="POST" enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="userid">Participant ID</label>
                            <input type="text" maxlength="11" name="userid" class="form-control onlyNo" placeholder="Enter Your Mobile No." required>

                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" maxlength="6" name="password" class="form-control" placeholder="Enter Your Password" required>

                        <div style="padding-top: 10px;">

                            <button type="submit" name="login" class="btn btn-login" style="width: 100%;">Login</button>

        $('.onlyNo').keypress(function (e) {
            var regex = new RegExp("^[0-9.]+$");

            var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
            // console.log(str);
            if (regex.test(str)) {
                return true;
            } else {
                return false;



if (isset($_POST['login'])) {
    $user_id = $_POST['userid'];
    $password = $_POST['password'];

    $login = "SELECT * FROM tbl_user WHERE user_id = '$user_id' and password = '$password' and status=1 ";
    $run = $con->prepare($login);
    $fetch_user = $run->fetch(PDO::FETCH_ASSOC);
    if ($fetch_user) {

        $_SESSION['user_id'] = $fetch_user['user_id'];
        $_SESSION['role'] = $fetch_user['role'];
        $_SESSION['status'] = $fetch_user['status'];
        $role = $_SESSION['role'];

        if ($role == 0) {
            echo '<script> window.location = "dashboard.php"; </script>';
            //header("Location: dashboard.php");
        } elseif ($role == 2) {
            echo '<script> window.location = "home.php"; </script>';
            //header("Location: home.php");

    } else {

        echo '<script>swal("Invalid username or password", "", "error");</script>';



Updated 22-Oct-20 21:40pm
Gerry Schmitz 26-Oct-20 13:16pm    
You forgot the kitchen sink.
Richard Deeming 27-Oct-20 12:37pm    
Your code is vulnerable to SQL Injection[^]. NEVER use string concatenation / interpolation to build a SQL query. ALWAYS use a parameterized query.

PHP: SQL Injection - Manual[^]
Richard Deeming 27-Oct-20 12:37pm    
You are also storing passwords in plain text. Don't do that.
Secure Password Authentication Explained Simply[^]
Salted Password Hashing - Doing it Right[^]

PHP even has built-in functions to help you do the right thing.
PHP: password_hash[^]
PHP: password_verify[^]
Richard Deeming 27-Oct-20 12:41pm    
And you haven't explained what the problem is, nor what you've done to try to diagnose it. And you haven't told us which version of Safari / iOS you're using to test.

In general, Bootstrap 4 works in the latest major version of Safari. Older versions may have bugs which you need to work around; or they may not work at all.

Browsers and devices · Bootstrap[^]
Wall of browser bugs · Bootstrap[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900