html2canvas生成图片底部出现白边儿的解决方法

在HTML5中，你可以通过使用JavaScript和CSS来禁止页面的横屏和竖屏转动。以下是几种常见的方法：\n\n### 1. 使用 screen.orientation.lock API\n你可以使用 screen.orientation.lock API 来锁定屏幕方向。这个API允许你将屏幕锁定为特定的方向（如 portrait 或 landscape）。\n\njavascript\nif (screen.orientation && screen.orientation.lock) {\n screen.orientation.lock('portrait').catch(function(error) {\n console.error('Orientation lock failed: ', error);\n });\n}\n\n\n### 2. 使用 CSS orientation 媒体查询\n你可以使用CSS的 orientation 媒体查询来根据屏幕方向应用不同的样式。虽然这不会阻止屏幕旋转，但你可以通过这种方式来调整布局。\n\ncss\n@media screen and (orientation: landscape) {\n body {\n transform: rotate(90deg);\n transform-origin: left top;\n width: 100vh;\n height: 100vw;\n overflow-x: hidden;\n position: absolute;\n top: 100%;\n left: 0;\n }\n}\n\n\n### 3. 使用 meta 标签\n虽然 meta 标签不能完全禁止屏幕旋转，但你可以通 过设置 viewport 来限制缩放和布局。\n\nhtml\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n\n\n### 4. 使用 window.onorientationchange 事件\n你可以监听 orientationchange 事件，并在检测到方向变化时强制页面回到原始方向。\n\njavascript\nwindow.addEventListener('orientationchange', function() {\n if (window.orientation !== 0) {\n window.orientation = 0;\n }\n});\n\n\n### 5. 使用 Fullscreen API 和 Screen Orientation API\n在某些情况下，你可以结合使用 Fullscreen API 和 Screen Orientation API 来锁定屏幕方向。\n\njavascript\ndocument.documentElement.requestFullscreen().then(function() {\n screen.orientation.lock('portrait');\n});\n\n\n### 注意事项\n- screen.orientation.lock 并不是所有浏览器都支持，尤其是在移动设备上。\n- 强 制锁定屏幕方向可能会影响用户体验，因此在使用时应谨慎考虑。\n\n### 总结\n虽然HTML5提供了一些方法来控制屏幕方向，但完全禁 止屏幕旋转并不总是可行的，尤其是在不同的设备和浏览器上。建议在使用这些方法时进行充分的测试，以确保在不同环境下都能正常工作。