Question

我正在创建一个网站，我希望它能完全响应移动设备。我以为我用标题实现了这一点，直到我用ipad看一下。＆＃34; Trasnform：translateX（-100％）;＆＃34;声明适用于除IOS设备之外的所有东西我在我的Android手机上试过它并且它工作得很好。我尝试了很多东西，包括使用像-webkit-这样的前缀，并使用＆＃34;！important＆＃34;声明。我一直在网上搜索，但我无法找到解决我问题的任何东西。这是代码。

HTML

<!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 href="orbat.html">ORBAT</a></li>
                    </ul>
                </div>
            </div>  
        </div>
    </div>

    <div class="container">
       <div class="featured">
            <h1 class="devMode"> Development Mode</h1>
        <p class="devModeText">Our 100% mobile friendly website is still under development. If you would like to provide feedback or suggestion please post them <a href="http://4para.net/forums/showthread.php?tid=28" target="window">here</a>, anything is helpful!</p>
        </div>

      </div>    


</body>

</html>

CSS

@media screen and (max-width: 810px) {

/*header*/
.nav {
    margin: 15px -40px ;
    background-color: #3f3f3f;
    transform: translateX(-100%);
    transition: 0.6s ease;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);

} 

.menu-icon {
    position: relative;
    margin-left: 10px;
    display: block;
    height: 54px;
    width: 54px;
    background-color: #2a2a2a;
    /*border: 0.75px solid #000;*/
    border-radius: 50%;
}

.line {
    width: 38px;
    height: 2px;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.logo {
    float: right;
}

.nav ul li {
    list-style: none;
    display: block;
    padding: 10px 120px 10px 30px;

}   

.open {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
}

.first {
    position: relative;
    top: 15px;
    margin: auto;
} 

.second {
    position: relative;
    top: 20px;
    margin: auto;
}

.third {
    position: relative;
    top: 25px;
    margin: auto;
} 
 /*end of header*/

 .container  {
    margin: 0 10px 0 10px; 
 }
}

JS

$(function() {

$('.menu-icon').on('click', function(){
$('.nav').toggleClass('open');
});

});

更新：我的网站实际上是缓存的，因此选择使用Cloudflare进入开发模式，结果两种方法都有效。非常感谢所有那些反应如此迅速的人，不像我。

Answer 1

虽然您不应拥有，但您可能需要尝试translate3d(x,y,z)而不是translateX(x)。例如：

-webkit-transform: translate3d(-100%,0,0);

推理来自此GitHub issue

我刚刚和Apple的一位工程师谈过此事。他确认在使用CSS3过渡和关键帧动画时，2d和3d变换都是硬件加速的。我们不应该改变任何事情。

他确实澄清说，当不使用过渡和关键帧进行动画处理时， 2d变换元素不会加速以节省内存。但是，在我们的例子中，我们的过渡总是使用关键帧动画。

CSS转换仅适用于IOS

1 个答案: