我已经编码一个月了，如果有一个简单的答案，很抱歉，但我已经搜索了好几天，没有结果。
我已经构建了一个简单的练习网页，使用Bootstrap旋转木马作为页面背景，并使用jQuery使div（页面内容最终会出现在哪里）出现。当我在Chrome、Firefox和Opera中打开HTML文件时，页面运行良好，但当在iPhone或iPad上的Safari中打开文件时，到div的链接不起作用（单击时，什么都不显示），旋转木马也根本不起作用，而是在页面下方显示为四个独立的图像，页面底部显示简单的"上一个"one_answers"下一个"链接。不幸的是，我无法在Safari的桌面版本上测试该页面。我觉得我错过了一些简单的东西，但我想不通。提前谢谢。下面是我的网站的全部代码（CSS、HTML和jQuery），这里是页面的jsFiddle：https://jsfiddle.net/fh8pxqqt/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="icon" type="image/png" href="http://res.cloudinary.com/jamesddavies/image/upload/v1469359895/strohl_logo_bod9yw.png"/>
<title>Alex Strohl</title>
<style>
#bg-wrapper {
position: relative;
}
/*Carousel Background*/
#carousel-bg {
width: 100%;
height: 100%;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
height: 100vh;
overflow: hidden;
object-fit: cover;
-webkit-object-fit: cover;
-o-object-fit: cover;
-moz-object-fit: cover;
}
/*Nav*/
nav {
}
ul {
height: 75px;
line-height: 50px;
background: rgba(255,255,255,0.4);
text-align: left;
padding: 10px;
z-index: 1;
position: absolute;
width: 100%;
}
ul:hover {
background: rgba(255,255,255,1);
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-moz-transition: 500ms;
}
ul:not(:hover) {
background: rgba(255,255,255,0.4);
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-moz-transition: 500ms;
}
ul img {
padding-right: 30px;
padding-left: 30px;
}
ul img:hover {
opacity: 0.5;
filter:Alpha(opacity=50);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
ul img:not(:hover) {
opacity: 1;
filter:Alpha(opacity=50);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
li {
color: rgba(0,0,0,1);
text-decoration: none;
}
.link:focus {
color: rgba(0,0,0,0.5);
text-decoration: none;
}
.link:hover {
text-decoration: none;
color: rgba(0,0,0,0.5);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
cursor: pointer;
}
.link:not(:hover) {
color: rgba(0,0,0,1);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
.link:click {
color: rgba(0,0,0,0.5);
}
li {
display: inline;
vertical-align: middle;
line-height: normal;
padding: 10px;
z-index: 1;
}
li img {
height: 50px;
width: auto;
}
/*adventures*/
#adventures-wrapper {
text-align: center;
}
.adventures {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*commissions*/
#commissions-wrapper {
text-align: center;
}
.commissions {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*book*/
#book-wrapper {
text-align: center;
}
.book {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*alex*/
#alex-wrapper {
text-align: center;
}
.alex {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*contact*/
#contact-wrapper {
text-align: center;
}
.contact {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*responsive design*/
@media (max-width: 1000px){
ul {
text-align: center;
}
}
</style>
</head>
<body>
<div id="bg-wrapper">
<!--Navbar-->
<div class="nav">
<ul>
<li><img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469359895/strohl_logo_bod9yw.png"></li>
<li class="link adventures-link">Adventures</li>
<li class="link commissions-link">Commissions</li>
<li class="link book-link">Book</li>
<li class="link alex-link">Alex</li>
<li class="link contact-link">Contact</li>
</ul>
</div>
<!--Adventures-->
<div id="adventures-wrapper">
<div class="adventures">
<h1>Adventures</h1>
</div>
</div>
<!--Commissions-->
<div id="commissions-wrapper">
<div class="commissions">
<h1>Commissions</h1>
</div>
</div>
<!--Book-->
<div id="book-wrapper">
<div class="book">
<h1>Book</h1>
</div>
</div>
<!--Alex-->
<div id="alex-wrapper">
<div class="alex">
<h1>Alex</h1>
</div>
</div>
<!--Contact-->
<div id="contact-wrapper">
<div class="contact">
<h1>Contact</h1>
</div>
</div>
<!--Carousel background-->
<div id="carousel-bg" class="carousel slide" data-ride="carousel" data-pause="false">
<!--Indicators-->
<ol class="carousel-indicators hidden">
<li data-target="#carousel-bg" data-slide-to="0" class="active"> </li>
<li data-target="#carousel-bg" data-slide-to="1"></li>
<li data-target="#carousel-bg" data-slide-to="2"></li>
<li data-target="#carousel-bg" data-slide-to="3"></li>
</ol>
<!--Wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264082/STROHL__MG_1150-Edit_wdcn2g.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264097/_ST_3667_ob8jtb.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264105/_ST_4081_yb2vdd.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264128/_ST_9411_h9ftou.jpg">
</div>
</div>
<!--Left and Right controls-->
<a class="left carousel-control hidden" href="#carousel-bg" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control hidden" href="#carousel-bg" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
/*Link functionality*/
$(document).ready(function(){
$("#carousel-bg").click(function(){
$(".adventures, .commissions, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".adventures-link").click(function(){
$(".adventures").toggle(500);
$(".commissions, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".commissions-link").click(function(){
$(".commissions").toggle(500);
$(".adventures, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".book-link").click(function(){
$(".book").toggle(500);
$(".adventures, .commissions, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".alex-link").click(function(){
$(".alex").toggle(500);
$(".adventures, .commissions, .book, .contact").hide(500);
});
});
$(document).ready(function(){
$(".contact-link").click(function(){
$(".contact").toggle(500);
$(".adventures, .commissions, .book, .alex").hide(500);
});
});
</script>
</body>
您是否尝试过在iphonechrome浏览器中打开您的网站？我认为您在移动设备中打开html文件时没有加载javascript文件。你的代码在safari中工作。我已经测试过了。
在移动浏览器中打开以下链接。看看它是否有效。
https://output.jsbin.com/cugawimabo