我有一个 #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>
最佳答案
问题在于:
width=device-width, height=device-height,
如果您希望屏幕能够上下滑动，请将此添加到您的元视口(viewport):
<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 - 我在控制 Android 浏览器缩放时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21709862/