在响应式设计中，我们经常会遇到一个问题，就是当页面在小屏幕设备上显示时，用户无法滑动页面。这个问题可能会导致用户无法查看完整的内容，从而影响用户体验。本文将介绍一些解决该问题的方法。
问题分析
为了更好地理解问题，让我们先来看一下问题的原因。在响应式设计中，我们通常会使用 CSS 媒体查询来设置不同屏幕尺寸下的样式。例如，我们可能会使用以下代码来设置在小屏幕设备上的页面宽度：
@media screen and (max-width: 767px) {
body {
width: 100%;
}
}这段代码表示当屏幕宽度小于等于 767 像素时，将 body 元素的宽度设置为 100%。这样可以确保页面在小屏幕设备上能够完全显示，但是也会带来一个问题：如果页面内容超过了屏幕高度，用户就无法滑动页面了。
这是因为在小屏幕设备上，浏览器会将页面的宽度设置为设备宽度，同时将页面的高度设置为文档的高度。由于文档的高度通常比设备的高度要高，所以当页面内容超过了设备高度时，用户就无法滑动页面了。
解决方法
为了解决这个问题，我们需要让浏览器将页面的高度设置为设备的高度，而不是文档的高度。有两种方法可以实现这个目标。
方法一：使用 height: 100vh
第一种方法是使用 CSS 的 vh 单位来设置页面的高度。vh 单位表示视口高度的百分比，例如 100vh 表示视口的高度。我们可以将页面的高度设置为 100vh，这样就可以确保页面的高度不会超过设备的高度。
body {
height: 100vh;
}这样设置之后，如果页面内容超过了设备高度，用户就可以滑动页面了。但是这种方法也有一个问题，就是在 iOS 设备上可能会导致页面出现滚动条。为了解决这个问题，我们可以使用 -webkit-overflow-scrolling: touch 来启用硬件加速滚动。
body {
height: 100vh;
-webkit-overflow-scrolling: touch;
}方法二：使用 JavaScript 动态设置页面高度
第二种方法是使用 JavaScript 动态设置页面的高度。我们可以使用以下代码获取设备的高度：
var deviceHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
然后将页面的高度设置为设备的高度：
document.body.style.height = deviceHeight + 'px';
这样设置之后，如果页面内容超过了设备高度，用户就可以滑动页面了。但是这种方法也有一个问题，就是需要等待 JavaScript 加载完成之后才能设置页面高度，这可能会导致页面闪烁或者出现问题。
总结
在响应式设计中，页面无法滑动是一个常见的问题。为了解决这个问题，我们可以使用 CSS 的 height: 100vh 或者 JavaScript 动态设置页面高度。这些方法都有一些局限性和问题，我们需要根据具体情况选择合适的方法。通过本文的学习，相信读者可以更好地理解响应式设计下的页面滑动问题，并掌握解决该问题的方法。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------------
-------
---- -
------- ------
--------------------------- ------
-
-------- -
-------- -----
---------- -----
------------ ----
-
------ ------ --- ----------- ------ -
-------- -
---------- ------
------- - -----
-
-
--------
-------
------
---- ----------------
--------------------------
--------------------------------------------------------------------------------------------------
------------------ --- - ------------- ------------ -- ---------- ----------------------------------------------
----------------------------------------------------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d8d65f1886fbafa4691c7e