在HTML5中，取消横屏显示可以通过设置meta标签的viewport属性来实现，viewport是网页的可视区域，通过设置viewport属性，可以控制页面在不同设备上的显示效果，以下是详细的技术教学：
1、我们需要了解viewport属性的各个参数含义：
width：设置视口宽度，单位为像素。
height：设置视口高度，单位为像素。
initialscale：设置页面首次加载时的缩放比例。
minimumscale：设置页面允许的最小缩放比例。
maximumscale：设置页面允许的最大缩放比例。
userscalable：设置用户是否可以手动缩放页面。
2、接下来，我们来看如何设置viewport属性来取消横屏显示，通常情况下，我们会将viewport的宽度设置为设备的宽度，高度设置为deviceheight，这样可以让页面自适应设备的高度，我们可以设置initialscale为1，minimumscale为1，maximumscale为1，userscalable为no，这样就可以禁止用户手动缩放页面，从而实现取消横屏显示的目的。
3、下面是一个简单的示例代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0, minimumscale=1.0, maximumscale=1.0, userscalable=no"> <title>取消横屏显示</title> </head> <body> <h1>欢迎来到我的网站！</h1> <p>在这里，你可以浏览我提供的各种信息和服务。</p> </body> </html>4、需要注意的是，虽然通过设置viewport属性可以禁止用户手动缩放页面，但在某些情况下，用户仍然可以通过双指缩放等操作来改变页面的缩放比例，如果你希望完全禁止用户对页面进行缩放操作，还需要在CSS中设置以下样式：
html { touchaction: manipulation; }这样，当用户尝试对页面进行缩放操作时，浏览器会忽略这些操作，从而实现完全禁止用户缩放页面的目的。
5、有些设备可能会自动识别横屏状态并调整页面的显示效果，为了确保页面在不同设备上都能正常显示，我们还需要在CSS中添加以下样式：
@media screen and (orientation: portrait) { body { transform: rotate(90deg); transformorigin: left top; width: 100vh; height: 100vw; overflowx: hidden; position: absolute; top: 100%; left: 0; } }这段CSS代码会根据设备的屏幕方向来调整页面的显示效果，当设备处于横屏状态时，页面会被旋转90度并调整宽度和高度，从而实现正常的横屏显示效果，当设备处于竖屏状态时，页面会恢复到原始的显示效果。
通过设置viewport属性和CSS样式，我们可以实现取消横屏显示的目的，需要注意的是，这种方法并不能完全阻止用户对页面进行缩放操作，但可以在很大程度上限制用户的缩放行为，如果你希望实现更严格的控制，可以考虑使用JavaScript来监听用户的缩放操作，并在适当的时候进行干预。
