在移动屏幕大小上重定向页面 JavaScript

在开发移动应用或响应式网站时，我们通常需要考虑移动设备的屏幕大小。而根据屏幕大小的不同，可能需要将用户重定向到不同的页面。这时就可以使用 JavaScript 实现屏幕大小检测和重定向功能。

屏幕大小检测

我们可以使用 window.innerWidth 和 window.innerHeight 属性获取浏览器窗口的宽度和高度。这两个属性返回的是整个浏览器窗口的大小，包括滚动条和边框。如果我们只需要屏幕的可见大小，还需要考虑滚动条。

var screenWidth = window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;

var screenHeight = window.innerHeight
  || document.documentElement.clientHeight
  || document.body.clientHeight;

通过上面的代码，我们可以获取屏幕的可见宽度和高度，其中 || 表示如果第一个值为假，则使用第二个值；如果第二个值为假，则使用第三个值。

页面重定向

如果根据屏幕大小需要重定向页面，我们可以使用 location.href 属性来实现。这个属性可以获取或设置当前页面的 URL 地址。

if (screenWidth < 768) {
  // 如果屏幕宽度小于 768 像素，重定向到移动版本页面
  location.href = 'http://m.example.com';
}

上面的代码中，如果屏幕宽度小于 768 像素，则将页面重定向到移动版本页面。

需要注意的是，重定向页面时会刷新整个页面，如果需要局部刷新，可以考虑使用 Ajax 等技术。

总结

在移动屏幕大小上重定向页面是移动应用和响应式网站开发中常见的需求。通过 JavaScript 可以轻松地实现屏幕大小检测和页面重定向功能，从而提高用户体验。

以上为编程助手生成的结果，仅供参考，开发者可根据需要自行进行修改。