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:
<?php
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 (isMobile()) {
}
date_default_timezone_set("Asia/Karachi");
session_start();
include_once('db.php');
$con = getDB();
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<title>Login</title>
<style>
.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 {
-webkit-animation: NAME-YOUR-ANIMATION 2s infinite;
-moz-animation: NAME-YOUR-ANIMATION 2s infinite;
-o-animation: NAME-YOUR-ANIMATION 2s infinite;
animation: NAME-YOUR-ANIMATION 2s infinite;
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;
-moz-animation: NAME-YOUR-ANIMATION-a 2s infinite;
-o-animation: NAME-YOUR-ANIMATION-a 2s infinite;
animation: NAME-YOUR-ANIMATION-a 2s infinite;
padding-left: 10px;
padding-right: 10px;
}
@-webkit-keyframes NAME-YOUR-ANIMATION-a {
0%, 49% {
color: #000;
background: #fff;
}
50%, 100% {
color: #fff;
background: #f00;
}
}
</style>
</head>
<body>
<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>
</p>
<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>
<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>
<div style="padding-top: 10px;">
<button type="submit" name="login" class="btn btn-login" style="width: 100%;">Login</button>
</div>
</form>
</div>
</div>
</div>
</section>
<script>
$('.onlyNo').keypress(function (e) {
var regex = new RegExp("^[0-9.]+$");
var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
if (regex.test(str)) {
return true;
} else {
e.preventDefault();
return false;
}
});
</script>
</body>
</html>
<?php
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);
$run->execute();
$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>';
} elseif ($role == 2) {
echo '<script> window.location = "home.php"; </script>';
}
} else {
echo '<script>swal("Invalid username or password", "", "error");</script>';
}
}
?>