我刚刚创建了一些测试代码,您可以在这里找到它
http://paloula.de/test/width_002.html
它在Chrome / Windows上运行良好,但是如果您在Chrome / Windows(例如Galaxy S5)或带Chrome的Android手机上模拟手机,则无法正常工作:该页面向左滚动,但未达到scrollLeft的最大值。 / p>
是CSS吗?是元标记吗?计算似乎正确。
有什么想法吗?谢谢!
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<style>
* {
margin: 0;
padding: 0;
}
HTML {
display: block;
position: relative;
height:100%;
}
BODY {
display: block;
position: relative;
min-height: 100%;
/* overflow-y: scroll; */
}
</style>
</head>
<body id="body">
<div style="background-color: #FF0000; display: block; position: relative; width: 1700px; height: 50px;">
<div style="background-color: #0000FF; display: block; position: absolute; width: 50px; height: 50px; right: 0"></div>
<div style="background-color: #FF00FF; display: block; position: absolute; width: 50px; height: 50px; left: 0"></div>
</div>
<script>
var scrollWidth = document.documentElement.scrollWidth;
var clientWidth = document.documentElement.clientWidth;
var offsetWidth = document.documentElement.offsetWidth;
console.log(scrollWidth);
console.log(clientWidth);
console.log(offsetWidth);
var maxScrollLeft = scrollWidth - clientWidth;
console.log("maxScrollLeft " + maxScrollLeft)
setTimeout(function() {
window.scrollTo(maxScrollLeft, 0);
}, 1);
setTimeout(function() {
window.scrollTo(0, 0);
}, 500);
</script>
</body>
</html>
答案 0 :(得分:0)
解决方案是在meta / viewport标签中添加minimum-scale = 1
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1"/>