Question

我有一个#scroller分层在菜单的顶部，我有一个按钮-webkit-transform: translate3d(265px, 0, 0);在右边。

当它向右滑动时，滚动条和菜单都试图适合屏幕，我不希望这样，我希望包装器滑出屏幕。

CSS

html, body {
    font-size: 0.75em;
    overflow:hidden;
    height:100%;
    width:100%;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body:after {
    content:'mobile';
    display: none;
}
a {
    text-decoration: none;
}
/* ------ Wrapper ----- */
 #wrapper {
    position: absolute;
    z-index: 1;
    top: 40px;
    bottom:0;
    left: 0;
    right:0;
    overflow:scroll;
}
#scroller {
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}
.slideout {
    -webkit-transform: translate3d(265px, 0, 0);
    position:absolute;
    left:0;
    transition: -webkit-transform .5s ease;
}

我不知道如何阻止Android尝试将整个内容整合到屏幕上。我希望#scroller能够从屏幕上滑落。

HTML

     <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-touch-fullscreen" content="yes">
      <meta name="HandheldFriendly" content="true" />
<body>
<div class="snap-drawers">
</div>
<div id="wrapper">
  <div id="scroller"> 
  </div>
</div>
</body>

Answer 1

问题在于：

width=device-width, height=device-height,

如果您希望屏幕能够向上滑动，请将此添加到元视口：

<META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/>

我希望如果它没有尝试这个就行了：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0,  user-scalable=0" />

如果仍然无法使用初始和最大比例，那么它应该可以正常工作。

如果您想要从左向右滚动，请添加以下内容：

<META NAME="viewport" CONTENT=" height=device-height, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

对于手机，您应该添加以下内容：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=no" />

使用user-scalable=yes允许放大或user-scalable=no以防止缩放。

这些没有必要删除它们可能导致问题：

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="HandheldFriendly" content="true" />

仍然没有让他们工作添加css媒体查询，问题应该解决：

(max-width: 640px){
//add code here//
}
(min-width: 641px) and (max-width: 800px){
//add code here//}

(min-width: 801px) and (max-width: 1024px){
//add code here//}
}
(min-width: 1025px){
//add code here//}
}

我无法控制Android浏览器规模

1 个答案: