作者：小小小小小燕子_1996 | 来源：互联网 | 2023-05-19 16:33
css3旋转模拟手机横屏。当手机不能自动旋转时，或有特殊需求。用css3transform，实现横屏展示。注意：相关样式注意横屏的显示。touch的手势方向没有变，依旧是原来方向，若有相关插件，注意
css3旋转模拟手机横屏。
当手机不能自动旋转时，或有特殊需求。用css3 transform，实现横屏展示。
注意：
- 相关样式注意横屏的显示。
- touch的手势方向没有变，依旧是原来方向，若有相关插件，注意方向。
- 此处用的jq，可以写成js。
- className取镶套的最外层，例如body。
代码：
/*强制横屏*/
function horizontalScreen(className){
// transform 强制横屏
var cOnW= window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var cOnH= window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// transform: rotate(90deg); width: 667px; height: 375px;transform-origin:28% 50%;
//var iosTopHe = 0;//若有其他样式判断，写于此
$(className).css({
"transform":"rotate(90deg) translate("+((conH-conW)/2)+"px,"+((conH-conW)/2)+"px)",
"width":conH+"px",
"height":conW+"px",
//"margin-top":iosTopHe+"px",
// "border-left":iosTopHe+"px solid #000",
"transform-origin":"center center",
"-webkit-transform-origin": "center center"
});
}
谢谢。
京公网安备 11010802041100号