
强制移动端 html 横屏效果
在移动端 html 中,可以设置页面强制横屏展示,让页面一开始就呈横向排列。但有时候,即使设置了强制横屏,页面的子元素也可能不会横屏。
例如,以下代码可以强制页面横屏:
@@##@@
div{
width: 736px;
height: 414px;
transform: rotate(90deg);
transform-origin: 207px 207px;
}
div img{
height:100vw;
width:auto;
}但是,子元素(如
)仍然可能不会横屏。这是因为:
立即学习“前端免费学习笔记(深入)”;
- 图片本身存在问题,例如宽高比例不合适。
- 其他地方的 css 样式覆盖了强制横屏设置。
解决方法:
- 检查图片本身是否存在问题,或者是否被其他样式影响。
- 重新检查强制横屏的 css 代码是否正确。
- 必要时,使用其他方法强制横屏,例如在 标签中添加 screen 属性:











