Библиотеки Jquery и bootstrap не работают на safari или любом другом устройстве iOS. Но прекрасно работает на устройствах android.
у меня есть приложение для викторины, которое предназначено для библиотек bootstrap и библиотек jQuery, а бэкенд-на PHP. Пользовательский интерфейс приложений полностью идеален во всех устройствах windows и andriod, но когда дело доходит до safari или любого браузера на iOS, пользовательский интерфейс приложений становится нарушенным. Я также проверил свою сеть. состояние библиотек jquery-304. Есть зацепка, в чем проблема ?
вот мой код
Что я уже пробовал:
<?php
/*
$useragent=$_SERVER['HTTP_USER_AGENT'];
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: http://m.yoursite.com/");
// header("Location: index.php");
}
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 {
/*
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;
}
}
</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);
// console.log(str);
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>';
//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>';
}
}
?>
Gerry Schmitz
Ты забыла про кухонную раковину.
Richard Deeming
Ваш код уязвим для SQL-инъекция[^]. НИКОГДА используйте конкатенацию строк / интерполяцию для построения SQL-запроса. ВСЕГДА используйте параметризованный запрос.
PHP: SQL-инъекция - руководство пользователя[^]
Richard Deeming
Вы также храните пароли в виде обычного текста. Не делай этого.
Безопасная Аутентификация Паролем Объясняется Просто[^]
Соленое хэширование паролей - делаем это правильно[^]
PHP даже имеет встроенные функции, которые помогут вам делать правильные вещи.
PHP: password_hash[^]
РНР: функцию password_verify[^]
Richard Deeming
И вы не объяснили, в чем проблема, и что вы сделали, чтобы попытаться диагностировать ее. И вы не сказали нам, какую версию Safari / iOS вы используете для тестирования.
В общем, Bootstrap 4 работает в последней основной версии Safari. Более старые версии могут содержать ошибки, которые вам нужно обойти; или они могут не работать вообще.
Браузеров и устройств · загрузочный[^]
Стены багов браузер · загрузки[^]