我正在制作一个网站，我希望它完全响应移动设备。我以为我已经通过标题实现了这一目标，直到我用 ipad 看到它。“转换：translateX(-100%);” 声明适用于除 IOS 设备之外的所有设备，我在 Android 手机上尝试过它，效果非常好。我尝试了很多方法，包括使用像 -webkit- 这样的前缀和使用“！important”声明。我一直在网上搜索，但找不到任何可以解决我的问题的东西。这是代码。
超文本标记语言
<!DOCTYPE html>
<h<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<script src="http://timthumb.googlecode.com/svn/trunk/timthumb.php"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="js/header.js"></script>
</head>
<body>
<div class="header">
<div class="container">
<div class="logo">
</div>
<div class="wrapper">
<div class="menu-icon">
<div class="line first"></div>
<div class="line second"></div>
<div class="line third"></div>
</div>
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="http://4para.net/forums">Forums</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="role-finder.html">Role Finder</a></li>
<li><a …